2013-08-17 56 views
8

http://jsfiddle.net/chovy/enmxu/CSSは要素

<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

+0

アニメーションやトランジションについて擬似要素について話すドキュメントにリンクしました。これはトランスフォームとは関係ありません。 – Adam

+0

これについて多くの質問があります –

答えて

20

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

テストケースを見た後:display: blockpseudo-transition.html

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

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

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

Transition Fiddle

新しいスタイル:

Fiddle

とのonLoad遷移に

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

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