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

【问题标题】：css transform doesn't work on css generated content for ::after, ::before elementscss 转换不适用于 ::after、::before 元素的 css 生成内容
【发布时间】：2013-08-17 11:00:32
【问题描述】：

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

【问题讨论】：

您已链接到有关伪元素上的动画和过渡的文档 - 这与变换无关。

标签： css css-transforms

【解决方案1】：

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

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

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

改变你的小提琴使用display: inline-block，瞧！

Fiddle

还有一个 onLoad 转换：

Transition Fiddle

新风格：

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

【讨论】：

【解决方案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）才能应用转换。

【讨论】：