css 旋转伪 :after 或 :before 内容：""
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9779919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css rotate a pseudo :after or :before content:""
提问by devric
anyway to make a rotation work on the pseudo
无论如何都要对伪进行旋转工作
content:"B6"?
I'm trying to rotate a unicode symbol.
我正在尝试旋转 unicode 符号。
回答by methodofaction
Inline elements can't be transformed, and pseudo elements are inline by default, so you must apply display: blockor display: inline-blockto transform them:
内联元素不能被转换，伪元素默认是内联的，所以你必须应用display: block或display: inline-block转换它们：
#whatever:after {
content:"B6";
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>回答by saddamwp
.process-list:after{
content: "91";
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%);
}
you can check this code . i hope you will easily understand.
你可以检查这个代码。我希望你会很容易理解。
