CSS中的伪元素

本文主要浅谈::before 和 ::after的用法，因为之前就有很多大神写过，我就主要谈谈简单应用。

伪元素

伪元素.png

图片引用文章
这张图片将我们常用的几种伪元素列出，我们在使用伪元素的时候为了能和伪类区分开，建议使用双冒号，虽然当前大部分浏览器都支持这两种写法。
今天主要是聊聊::before 和 ::after的用法

用法一：清除浮动

.clearfix::after {    content: "";    display: block;    clear: both;
}

这个写法已经是非常常用的写法，用于清除页面布局中浮动元素脱离文档流导致的问题。我们书写的时候只需要在css中把这个写上去，需要浮动的时候把浮动加在元素的css中，然后这些元素的父元素在class中加上.clearfix即可。
稍微说下这代码的意义：在类别为clearfix的元素后面添加一个伪元素，内容为空，这个伪元素是块级元素，并且始终处于之前解析的浮动元素的下方。简单来说就是这个浮动元素后面紧紧跟着一个元素，只不过这个元素你看不见，因为它既没有边框也没有内容.那么我们把这个伪元素通过边框调试出来看看。

出现的伪元素.png

因为这个伪元素仍然是文档流，后面解析渲染的当然不可能在伪元素的上面。

用伪元素撑开父容器

这个一种特殊用法，使用场景可以是在父容器中某元素布局，但父容器因为一些原因没能够撑开到我们需要的高度。或者我们需要修改容器的高度大小，但是不合适在容器内再添加一个标签。

撑开之前.png

撑开之后.png

遮罩

需要在元素之前或者之后增加样式或者元素时使用伪元素。典型例子就是使用遮罩，用伪元素可以省标签。

无遮罩.png

有遮罩.png

用绝对定位+伪元素解决遮罩的布局问题，这样我们就不需要额外的增加标签

推荐

还有一些高级用法这里没有介绍，不过我发现一篇博文写的很不错，非常贴近工作的实用例子，推荐给大家【CSS进阶】伪元素的妙用--单标签之美。

作者：张路1806
链接：https://www.jianshu.com/p/54da4e9006c0