十五,::before和::after
::before和::after这两个伪元素主要用来给元素的前面或者后面插入内容。
代码例子:我们在三角形的基础上插入十二边形
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six::after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
运行效果: