W3C home > Mailing lists > Public > www-style@w3.org > April 2013

[[css-transforms]] Transforms on pseudo classes

From: Hannes Papenberg <hannes@mypapenberg.de>
Date: Tue, 09 Apr 2013 12:57:46 +0000
Message-ID: <5163E5A3.9030104@mypapenberg.de>
To: www-style@w3.org
Hi to the list,
I've done a little bit of testing and I guess I found a little hole in
the transform specs. My specific use case is the following: I have a
menu made out of a list and one of the menu items has been added. I want
to mark that item with a little "new" tag in the upper left corner. That
tag should have a orange background, white border, black shadow, rounded
corners and (the important part) it should be rotated by maybe 30
degree. At the time that I needed this feature, I used an image and
absolute-positioned it in the right position.

Now I was thinking that you could achieve basically the same thing with
the :before pseudo class:

..menu li a:before {
    background: orange;
    border: 1px solid white;
    border-radius:5px;
    box-shadow: 0 0 1px 1px #888888;
    color: white;
    content: "New";
    padding: 3px;
    transform: rotate(30deg);
}

However, while everything else works great on the :before, the transform
does not. Neither Firefox 20, nor Chrome 26 rotate the content injected
with :before. Shouldn't transforms also apply to :before? I couldn't
find anything regarding this in the specs... Is this an oversight in the
specs or a missing test or a missing implementation from the browser
vendors or am I interpreting this wrong?

Thanks for your consideration,

Hannes Papenberg
Received on Wednesday, 17 April 2013 12:09:31 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:10 UTC