Question

我是前端开发人员的新手，我正在学习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>

我们创建了一种不同类型的三角形并旋转该位置以实现此位置。但是我们使用:before和:after的目的是什么？

Answer 1

看......你需要总共12颗星。如果你仅使用#twelve-point-star css，你将获得4个角......你需要更多8个角...为此你已经使用:before来获得更多4个角和:after来得到最后4个角的伪类，得到总共12个角..

尝试更改您将看到真实视觉效果的颜色。

Stack Snippet

#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>

参考链接

Answer 2

:before

意味着在每个＃12点星之前，＃12点星的css：之前将被应用于＃12-point-star。同样地：之后，除了它是在每个＃12点星之后的地方。所以在代码中发生的事情是你基本上制作了3个不同方向旋转的方块，这就产生了这种效果。

W3schools是您学习CSS的重要资源。

十二点星如何正常工作？

2 个答案: