CSSは要素

Question

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

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

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

前にこのサイトによると、それはクロム23で修正されました::のためのコンテンツを生成::後のCSS上では動作しません変換...しかし、私はクローム28があり、それは動作しません。

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

Answer 1

私は自分自身このことについて少し好奇心旺盛だので、私はそれに少しさらに見えました。それはうまくいく、それはうまくいく。

テストケースを見た後：display: block：pseudo-transition.html

私は擬似要素はのスタイルを持っていた気づきました。

あなたのフィドルを変更してdisplay: inline-blockとvoilaを使用するように変更してください！ w3 specによると

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

Answer 2

：

Transition Fiddle

新しいスタイル：

Fiddle

とのonLoad遷移に

変換可能な要素は、ブロックレベルまたはアトムインラインレベルの要素、または 'display-property'が 'table-row'、 'table-row-group'、 ' 「テーブル・ヘッダ・グループ」、「テーブル・フッタ・グループ」、「テーブル・セル」、または「テーブル・キャプション」である。または 'transform'、 'patternTransform'または 'gradientTransform'属性を持つSVG名前空間の要素（[SVG11]を参照）。

したがって、あなたが適用される変換のために、あなたの要素や擬似要素にdisplay: blockまたはdisplay: inline-blockを指定する（または、言う、display: table-row）する必要があります。