我是前端开发新手，正在学习CSS基础知识，我可以理解以下代码
#twelve-point-star {
height: 100px;
width: 100px;
margin: 30px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: blue;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: blue;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}<p>twelve point star</p>
<div id="twelve-point-star"></div>我们创建了一种不同类型的三 Angular 形并旋转该位置以达到该位置。但是我们使用 :before 和 :after 的目的是什么？
最佳答案
看...您总共需要 12 颗星。如果您仅应用 css #twelve-point-star，您将获得 4 个 Angular ...您还需要 8 个 Angular ...为此您已使用 :before获得更多 4 个 Angular ，:after 获得最终 4 个 Angular 伪类以获得总共 12 个 Angular ..
尝试更改颜色，您将看到真实的视觉效果。
堆栈片段
#twelve-point-star {
height: 100px;
width: 100px;
margin:30px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: red;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: black;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}<body>
<p>
twelve point star
</p>
<div id="twelve-point-star">
</div>
</body>引用链接
关于html - 十二点星如何正确工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48556091/