前言

有些时候在绘制页面的时候，我们可能需要完成一些微小的样式，或者加入一些文字什么的，这个时候我们如果添加一些额外的标签来绘制的话，可能就会显得非常繁琐，而且可能还会变得难以维护，这个时候我们就可以引入伪元素这个概念来解决这个问题。而我们今天要介绍的是 ::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: "";
  }
}

好，今天就到这里了,拜了个拜，再见各位。

CSS之选择器（六）::before和::after

前言

伪元素和伪类

::before和::after