css transform doesn't work on css generated content for ::after, ::before elements

Question

http://jsfiddle.net/chovy/enmxu/

<a href="#">Inbox</a>

a { text-decoration: none; }
a::after { content: ' ⇧'; transform: rotate(180deg); }

According to this site, it was fixed in Chrome 23...but I have Chrome 28 and it doesn't work.

http://css-tricks.com/transitions-and-animations-on-css-generated-content/ http://trac.webkit.org/changeset/138632

Answer 1

I got a bit curious about this myself, so I looked a bit further into it. Turns out, it does work.

After looking at the test case: pseudo-transition.html

I noticed the pseudo element had a style of: display: block.

Changing your fiddle to use display: inline-block and voila!

Fiddle

And with an onLoad transition:

Transition Fiddle

New Style:

a:after { display: inline-block; content: ' ⇧'; -webkit-transform: rotate(180deg); }