css - 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和瞧！

小提琴

并带有 onLoad 转换：

过渡小提琴

新风格：

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

Answer 2

根据w3 规范：

可转换元素是 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），以便应用转换。