前端技术学习之选择器（十三）

十五，::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;

}

运行效果：