CSS變換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

而且有有載過渡：

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）到你的元素或僞元素，以使要應用的轉換。