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),以便应用变换.