css - 变换 :before 或 :after 项

Question

有没有办法将变换应用到使用 :before 插入的元素上？

以下方法不起作用，但我对其他解决方案持开放态度。

.itemclass:before  {
  content: "➨";
  transform: rotate(30deg);
  -ms-transform: rotate(30deg); /* IE 9 */
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

Answer 1

转换不能应用于非替换inline元素。添加：

display:inline-block;

演示

旁注：尽管这不适用于此用例，但absolute/fixed定位将放弃对display属性的需求，因为它们会自动被视为display:block.

另外，检查可转换元素的定义：

可转换元素是 HTML 命名空间中的元素，它可以是块级或原子内联级元素，或者其 '<code>display' 属性计算为 '<code>table-row'、'<code>table- row-group'、'<code>table-header-group'、'<code>table-footer-group'、'<code>table-cell' 或 '<code>table-caption'；或 SVG 命名空间中的元素（参见[SVG11]），它具有属性 '<a href="http://www.w3.org/TR/css3-transforms/#effects"> transform', '<code>patternTransform ' 或 '<code>gradientTransform'。