css 旋转一个伪 :after 或 :before 内容：""

Posted 2023-03-06

【中文标题】css 旋转一个伪 :after 或 :before 内容：""

【英文标题】：css rotate a pseudo :after or :before content:""

【发布时间】：2012-04-04 12:19:55

【问题描述】：

无论如何都要对伪进行旋转

content:"\24B6"? 

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

【问题讨论】：

你是想一次性（30度）旋转伪元素，还是无限旋转它？未指定。

【参考方案1】：

内联元素是不能变换的，伪元素默认是内联的，所以你必须申请display: block或者display: inline-block来变换它们：

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

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

【讨论】：

感谢救命恩人 :)

【参考方案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%);

您可以检查此代码。我希望你会很容易理解。

【讨论】：

其实我不太容易理解 :) 一个有用的答案会解释代码的作用，以及它与接受的答案有何不同。它也将是一个可运行的 sn-p，就像接受的答案一样。