css - 变换 :before or :after item

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;

Demo

旁注:尽管这不适用于此用例，absolute/fixed 定位将不再需要 display属性，因为这些属性会被自动视为 display:block。

此外，检查 transformable element 的定义:

A transformable element is an element in the HTML namespace which is either a block-level or atomic inline-level element, or whose ‘display’ property computes to ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or ‘table-caption’; or an element in the SVG namespace (see [SVG11]) which has the attributes ‘transform’, ‘patternTransform’ or ‘gradientTransform’.