前言

        在html中，有些小标签不想用具体的标签去写，就会用到伪元素，那么伪元素是什么呢，该如何使用呢？

一、伪元素是什么？

        伪元素相当于在一个盒子内部产生一个行内盒子

二、使用步骤

1.创建一个盒子

2.效果如下

3、使用伪元素如何在该大盒子内部创建2个小盒子呢

在style里面添加2个样式：

        div::before{content: "";width: 50px;height: 50px;background-color: black;display: block;position: absolute;top: 5px;left: 20px;}div::after{content: "";width: 20px;height: 20px;background-color:aqua;position: relative;display: block;top: 5px;left: 5px;}

4、添加后的样式

 可以清晰的看到大盒子内部多了2个小盒子，他们通过方向属性进行了偏移，这里用到了定位，定位不懂的伙伴可以参考上一篇博客html中的定位知识点如何使用_小魏快起床的博客-CSDN博客

这里主要就是教大学伪元素如何创建使用，相信大家已经有所理解了，这里再总结一下吧

5、before和after的区别

        上面我创建了2个伪元素，一个是before，一个是after，这里对其进行一个解释

先上代码，我将定位去掉了，并且在div盒子里面添加了文字

内容

效果如下：

 如图可以得到，before是在内容出现之前创建的，after这个伪元素是在内容结束之后创建的

六、总结

• ::before和::after前面的双冒号，也可以写为单冒号

• content是必备属性，里面可以填写简单的文字内容

• JavaScript无法操作伪元素

• 伪元素产生时，默认是行内元素，无法指定宽高，所以需要用display转为块级元素