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

css css-transforms
chovy picture chovy · Aug 17, 2013 · Viewed 8.6k times · Source

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

dc5 picture dc5 · Aug 17, 2013

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); }

Related questions

How to apply multiple transforms in CSS?

Using CSS, how can I apply more than one transform? Example: In the following, only the translation is applied, not the rotation. li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

Read More
Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "…

Read More
Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More