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
答案 0 :(得分:25)
查看测试用例后:pseudo-transition.html
我注意到伪元素的样式为:display: block
。
改变你的小提琴使用display: inline-block
并瞧!
使用onLoad过渡:
新风格:
a:after { display: inline-block; content: ' ⇧'; -webkit-transform: rotate(180deg); }
答案 1 :(得分:8)
根据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
),以便应用转换。