往期链接：
「CSS之选择器」
「CSS之选择器（二）」
「CSS之选择器（三）」
「CSS之选择器（四）」
「CSS之选择器（五）」
前言
有些时候在绘制页面的时候，我们可能需要完成一些微小的样式，或者加入一些文字什么的，这个时候我们如果添加一些额外的标签来绘制的话，可能就会显得非常繁琐，而且可能还会变得难以维护，这时我们就可以引入伪元素这个概念来解决这个问题。而我们今天要介绍的是 ::before 和::after 这两个伪元素。
伪元素和伪类
首先，在介绍伪元素之前，我们还要介绍另一种选择器：伪类。他和伪元素的写法很像。
::before 和::after
::before 和::after 必须结合 content 使用，
接下来，我们看一段 HTML 代码：
<p> <span>:before</span> CSS <span>:after</span> </p>
复制代码
如上，这段代码完全可以通过伪元素来实现，代码实现如下：
// HTML<p>CSS</p>
// CSSp { &::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: ""; }}
复制代码
好，今天就到这里了,拜了个拜，再见各位。
评论