css旋转伪指令:after或:before内容:“”


159

无论如何要使伪旋转

content:"\24B6"? 

我正在尝试旋转unicode符号。


您是要一次旋转伪元素(30deg),还是无限旋转它?没有指定。
RealMJDev

Answers:


358

内联元素不能转换,伪元素默认情况下是内联的,因此您必须应用display: blockdisplay: inline-block转换它们:

#whatever:after {
  content:"\24B6";
  display: inline-block;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
<div id="whatever">Some text </div>


-1
.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%);
}

您可以检查此代码。希望您能轻松理解。


1
实际上,我不容易理解:)一个有用的答案将解释代码的作用以及与已接受答案的区别。就像已接受的答案一样,这也是一个可运行的代码段。
Dan Dascalescu
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.