CSS之选择器（六）::before和::after
前言
有些时候在绘制页面的时候，我们可能需要完成一些微小的样式，或者加入一些文字什么的，这个时候我们如果添加一些额外的标签来绘制的话，可能就会显得非常繁琐，而且可能还会变得难以维护，这个时候我们就可以引入伪元素这个概念来解决这个问题。而我们今天要介绍的是 ::before和::after这两个伪元素。
伪元素和伪类
首先，在介绍伪元素之前，我们还要介绍另一种选择器：伪类。他和伪元素的写法很像。
伪元素一般是一些实体选择器，选择满足条件节点，例如
::before、::after、:nth-child(n)和:first-child伪类通常是一些状态选择器，选择处于某种状态的节点，例如:before、:after、:hover、:focus和:checked
::before和::after
::before和::after必须结合content使用，
接下来，我们看一段HTML代码：
<p> <span>:before</span> CSS <span>:after</span> </p> 复制代码
如上，这段代码完全可以通过伪元素来实现，代码实现如下：
// HTML <p>CSS</p> // CSS p { &::before { content: ":before"; } &::after { content: ":after"; } } 复制代码接下来，我们来看一张图片
上图的气泡确认框算是比较常见的应用场景了，而右侧的小三角就可以通过伪元素来实现，接下来让我们来看代码吧。
// HTML <div class="tab">AFTER</div> <div class="emptyTab">BEFORE/AFTER</div> // CSS .tab { position: relative; width: 200px; height: 50px; border-radius: 5px; background-color: #3c9; line-height: 50px; text-align: center; font-size: 20px; color: #fff; &::after { position: absolute; left: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: #3c9; content: ""; } } .emptyTab { position: relative; width: 200px; height: 50px; border: 2px solid #3c9; border-radius: 5px; line-height: 46px; text-align: center; font-size: 20px; color: #3c9; &::before { position: absolute; left: 100%; top: 50%; margin: -5px 0 0 2px; border: 5px solid transparent; border-left-color: #3c9; content: ""; } &::after { position: absolute; left: 100%; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left-color: #fff; content: ""; } } 复制代码好，今天就到这里了,拜了个拜，再见各位。
作者：Augus
链接：https://juejin.cn/post/7032590551840981028