transformacji CSS nie działa na css generowane treści :: potem :: przed elementami

Question

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

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

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

Według tej strony, została ona ustalona w Chrome 23 ... ale mam 28 i Chrome to nie działa.

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

Answer 1

mam trochę ciekawi ten sam, więc wyglądał trochę dalej do niego. Okazuje się, że działa.

Po pobycie w przypadku testu: pseudo-transition.html

zauważyłem element pseudo miał styl: display: block.

Zmieniając skrzypce w celu użycia display: inline-block i voila!

Fiddle

I z przejściem onLoad:

Transition Fiddle

New Style:

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

Answer 2

Według w3 spec:

Element przekształcalny jest elementem w przestrzeni nazw HTML, który jest albo blokowym, albo atomowym elementem liniowym, lub którego właściwość "display" oblicza się jako "wiersz tabeli", "wiersz tabeli - grupa", " table-header-group ',' table-footer-group ',' table-cell 'lub' table-caption '; lub element w przestrzeni nazw SVG (patrz [SVG11]), który ma atrybuty "transformacja", "patternTransform" lub "gradientTransform".

Stąd należy określić display: block lub display: inline-block (lub, powiedzmy, display: table-row) do elementu lub pseudo-elementu w celu transformaty być stosowane.