css, bu Chrome 23 giderilmiştir Bu siteye göre elemanların

Question

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

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

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

önce :: için :: sonrasında üretilen içerik css çalışmıyor dönüşüm ... ama Krom 28 ve işe yaramıyor. http://trac.webkit.org/changeset/138632

Answer 1

http://css-tricks.com/transitions-and-animations-on-css-generated-content/

kendimi bu konuda biraz meraklı var, bu yüzden içine biraz daha baktı. Çıkıyor, işe yarıyor.

test durumu baktıktan sonra: display: block:

pseudo-transition.html Ben sözde elemanı bir tarzı vardı fark ettim.

Kemanınızı display: inline-block ve voila! w3 spec göre

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

Answer 2

:

Transition Fiddle

Yeni stili:

Fiddle

ve Onload geçiş ile

Dönüştürülebilir bir öğe, HTML ad alanında, blok düzeyindeki veya atom düzeyi satır içi öğesi olan veya 'display' özelliği 'table-row', 'table-row-group', 'olarak hesaplanan bir öğedir. tablo-üstbilgi-grubu ',' tablo altbilgi-grubu ',' tablo-hücresi 'ya da' tablo-başlık '; veya "dönüşüm", "patternTransform" veya "gradientTransform" özelliklerine sahip SVG ad alanında bir öğe (bkz. [SVG11]).

Dolayısıyla uygulanacak dönüşümü için sırayla elemanı veya sözde elemana display: block veya display: inline-block (veya, display: table-row demek) belirtmek gerekir.