如何旋转伪元素的内容值

Question

由于伪元素是内联的，并且您无法对内联元素进行变换，那么我该如何使伪元素的内容值旋转起来呢？

content:"\24B6"? 

我正在尝试旋转一个Unicode符号。

- devric

---

你是想让伪元素旋转一次（30度），还是无限旋转？没有具体说明。 - Michiel J Otto

Answer 1

内联元素无法进行转换，而伪元素默认为内联，因此必须应用 display: block 或 display: inline-block 以进行转换：

#whatever:after {
  content: "\24B6";
  display: inline-block;
  transform: rotate(30deg);
}

<div id="whatever">Some text </div>

- methodofaction

---

这个答案比链接的重复内容中的答案好多了。那些答案虽然提供了很多关于为什么默认情况下旋转伪随机数不起作用的信息，但却没有提供任何解决方案。而这个答案不仅解释了为什么，还说明了如何修复它。 - walen

Answer 2

.process-list:after{
    content: "\2191";
    position: absolute;
    top:50%;
    right:-8px;
    background-color: #ea1f41;
    width:35px;
    height: 35px;
    border:2px solid #ffffff;
    border-radius: 5px;
    color: #ffffff;
    z-index: 10000;
    -webkit-transform: rotate(50deg) translateY(-50%);
    -moz-transform: rotate(50deg) translateY(-50%);
    -ms-transform: rotate(50deg) translateY(-50%);
    -o-transform: rotate(50deg) translateY(-50%);
    transform: rotate(50deg) translateY(-50%);
}

您可以检查这段代码。我希望您能轻松理解。

- saddamwp

---

实际上我不太理解 :) 一个有用的答案应该解释代码的作用以及它与被接受的答案的区别。它也应该是可运行的片段，就像被接受的答案一样。 - Dan Dascalescu