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

时间:2013-08-17 00:56:48

标签: css3 css-transforms

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

2 个答案:

答案 0 :(得分:25)

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

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

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

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

Fiddle

使用onLoad过渡:

Transition Fiddle

新风格:

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: blockdisplay: inline-block(或者说,display: table-row),以便应用转换。