详细解读CSS中的伪类after

当我们想在某一个元素的内容之后加入一些特殊的样式时，可以使用伪类 ::after。在本文中，我们将详细解读 CSS 中的伪类 ::after 的使用方法和应用场景。

什么是伪类 ::after

伪类 ::after 是一种可以在元素的内容后面添加内容或样式的伪类，通常结合 content 属性来使用。它用于在一个元素的内部的最后一个子元素之后添加内容。

示例代码：

<div class="box">
  这是一组内容。
</div>

.box::after {
  content: "后面添加的内容";
}

在上面的示例中，我们为 .box 元素添加了一个伪类 ::after，并将其内容设置为 “后面添加的内容”。此时 .box 元素的内部末尾就会出现 “后面添加的内容” 的文本。

伪类 ::after 的使用场景

添加图标

我们可以使用伪类 ::after 来添加图标，比如列表项前面的小圆点，验证表单项的对勾符号等。

例如这个示例，我们给按钮加上一个箭头图标。

<button class="btn">点击</button>

.btn::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("arrow.png") no-repeat center center / contain;
  margin-left: 5px;
}

在上面的示例中，我们为 button 标签添加了一个伪类 ::after，并将其内容设置为空白字符。我们将伪类 ::after 设置为显示一个 inline-block 的元素，其宽度和高度分别为 10px，并将其背景设置为 arrow.png，并水平、垂直居中，坐标点为盒模型的中心。最后我们设置了一个 margin-left 距离来将箭头图标与文本内容隔开。

嵌套列表

我们可以使用伪元素 ::before 和 ::after 来生成想要的形状，比如制作可以无限嵌套的三角符号。例如下面这个示例，我们使用伪类 ::before 和 ::after 来制作一个 Demo。

<ul class="list">
  <li>item 1
    <ul>
      <li>item 1.1</li>
      <li>item 1.2</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>item 2.1
        <ul>
          <li>item 2.1.1</li>
          <li>item 2.1.2</li>
        </ul>
      </li>
      <li>item 2.2</li>
    </ul>
  </li>
</ul>

.list ul {
  list-style-type: none;
}

.list li {
  position: relative;
  padding-left: 20px;
}

.list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ccc;
  position: absolute;
  left: 6px;
  top: 8px;
}

.list li ul {
  margin: 0;
  padding-left: 20px;
}

.list li:last-child::before {
  background: none;
}
.list li:last-child::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  height: 8px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 14px;
}
.list li:nth-last-child(2)::before {
  height: 14px;
  top: -8px;
}
.list li:nth-last-child(2)::after {
  height: 16px;
  top: -16px;
}
.list li:first-child::before {
  height: 16px;
  top: 8px;
}
.list li:first-child::after {
  height: 16px;
  top: 8px;
}

在上面的示例中，我们为 Li 标签添加了一个伪类 ::before，用来显示一个圆点。我们还设置了许多不同的条件语句，使该 Demo 显示得更加正确。