CSS 有一系列的伪元素，如 :before，:after，:first-line，:first-letter 等。
我们平常使用最多的是 :before，:after，这也是所有前端开发都要掌握并且熟练应用的技巧。
before/after 伪元素介绍
:before，:after 代表元素自身内容 之前 和 之后 的内容。
先举个简单的例子，一看就懂了：
p 元素原本的内容只有"之道前端"，但是利用 :before，:after 可以给原来 p 元素自身内容的前面和后面添加内容。
最终的结果，就像 p 元素原本就拥有这些内容一样。
:before，:after 之所以称为伪元素，是因为它们是元素，虽然是假的(伪)，但本质还是元素，因此，其他的 CSS 规则可以操作在它们身上。比如：
正因为这个特性，等于每个 HTML 元素都包含 2 个子元素，不需要写 HTML 标签，但是可以赋予 CSS 规则，这给了我们非常多的想象空间和便利。
这里比较关键的是 content 属性，这个属性表示伪元素的内容是什么，因为伪元素是没有 HTML 标签的，所以只能在 CSS 中定义这些元素的内容。content 属性的值常用的主要有以下 3 类：
- 字符串：赋予常量文字内容
- attr(attr_name) ：使用父元素
attr_name属性的值作为伪元素的内容，可以看下面的例子 - url：引用外部资源，常用的是图片，这里就不举例了
如果不想要内容的话，就赋予空字符串就好了，这也是我们最常用的方式，因为基于结构和样式分离的原则，我们不建议在 CSS 中编写页面内容，这样不利于调试和维护。
同时，因为伪元素不能被 JS 操作，所以 :before，:after 一般都用来实现样式效果。
好了，:before，:after 伪元素的基础知识就学习这么多就够了，其他的你可以扩展去学习。
before/after 伪元素的作用
网上有很多 :before，:after 的应用场景举例，比如清除浮动之类的，我就不重复了，你可以自己去查。
我这里想着重介绍擅于应用 :before，:after 的作用，让你想清楚方向，正确练习它们。做到：在有需要的时候，想到要使用它们。同时只在需要的时候使用，而不是滥用。
有助于结构&样式分离，提升 HTML 代码质量
一份高质量的 HTML&CSS 代码，一定是结构&样式分离的。而 :before，:after 对于结构&样式分离非常有帮助。
正如前文的介绍，:before，:after 可以在不写 HTML 标签的前提下，给每个元素增加两个子元素，而且大部分 CSS 都可以作用到它们身上，利用这个特性，我们可以实现很多细节的样式，而不需要为了实现某些效果，写一些空的 div/span 标签。
这不仅可以节省 HTML 标签和代码，更重要的是，它们有助于结构&样式分离，让我们的 HTML 代码更加纯净。
如果你拥有结构&样式分离的思想，为了实现某个 CSS 效果必须要添加一些空标签，为此感到很难受的时候 ，:before，:after 大概率能帮到你。
举个小栗子：
这是一个常见的效果，就是一些居中子标题，两边再补一点样式，这样好看一点。
可以看到上面两种实现方案的效果和 CSS 代码几乎一样，但是 HTML 的差别很明显，上面的 HTML 代码多了两个 span 元素，让我们的 HTML 代码看起来很奇怪。
再举一个例子，在我们的 P2 原创项目 (戳此查看)中，实现天猫首页的顶部栏中有这样一个效果：
这是很常见的效果，在一些按钮的后面，有个小箭头，或者在前面有个小图标。
这时，我们也可以使用 :before，:after 来实现这些效果。
以上代码节选自我们的 P2 原创项目的官方参考答案，感兴趣可以点击这里查看。
再来看另外一个例子，也是在我们的 P2 原创项目 (戳此查看)中，实现这样一个效果：
这个小小的 tips 文案，虽然内容不多，但是却混杂着两种布局，"进口精选" 和 "大牌好货" 字号一样，横向布局；但是"轻松购入"字号和"大牌好货"不一样，纵向布局。
如果不注意的同学，很可能就会写出很复杂的嵌套标签，实现横向 + 纵向的布局，但是这里使用 after 伪元素之后，可以很好地精简我们的 HTML 代码，让纵向布局在一个元素中解决。同时，使用 contet: attr() 让文案保留在 HTML 代码中，方便 HTML 代码的维护。
以上代码节选自我们的 P2 原创项目的官方参考答案，感兴趣可以点击这里查看。
扩展"自己"
谨记：:before，:after 让每个 HTML 元素都默认新增 2 个子元素。
因此，当我们因为要实现某个复杂样式，需要多个元素配合时，就可以利用 :before，:after，这样我们只需要 1 个元素即可。
例如下面的小图标：
:before，:after 伪元素是属于父元素的，因此当我们点击这些伪元素的时候，实际上是点击父元素。
利用这个特性，我们可以实现类似 input + label 的点击联动效果。
除了这个之外，我们最常用这个点击关联特性来实现扩展元素的可点击区域。比如：
今天的分享到这里就差不多了，最后小结一下。
要想提升我们的 HTML&CSS 能力，一定要注意结构&样式分离，
而 :before，:after 这对伪元素是我们达成这个目标的有力助手，是所有前端都必须熟练掌握的技能。
----------------【END】----------------
如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。
戳这里 免费获取 之道前端的学习资料和专属服务。