css转换不适用于:: after，:: before元素的css生成内容

Question

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

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

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

根据这个网站，它已在Chrome 23中修复...但我有Chrome 28但它不起作用。

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

Answer 1

我自己对此有点好奇，所以我进一步了解它。事实证明，它确实有效。

查看测试用例后：pseudo-transition.html

我注意到伪元素的样式为：display: block。

改变你的小提琴使用display: inline-block并瞧！

Fiddle

使用onLoad过渡：

Transition Fiddle

新风格：

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

Answer 2

根据w3 spec：

  

可转换元素是HTML命名空间中的一个元素，它是块级或原子内联级元素，或者其'display'属性计算为'table-row'，'table -row-group'，'table-header-group'，'table-footer-group'，'table-cell'或'table-caption';或SVG命名空间中的一个元素（参见[SVG11]），其中包含'transform'，'patternTransform'或'gradientTransform'属性。

因此，您需要为元素或伪元素指定display: block或display: inline-block（或者说，display: table-row），以便应用转换。