Re: [[css-transforms]] Transforms on pseudo classes

Hi, 

this is an 'author'-level problem. You have to set your pseudo-element to 

display: block;

so that the pseudo element is a transformable element (http://www.w3.org/TR/css3-transforms/#transformable-element).
With that it works in Safari, Chrome + Firefox, too. Opera differs here and transforms even if it is not set.

----
Anselm Hannemann
@helloanselm


On Tuesday, 9. April 2013 at 14:57, Hannes Papenberg wrote:

> 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