[[css-transforms]] Transforms on pseudo classes

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