CSS :before和:after在CSS中的作用

在本文中，我们将介绍CSS中的:before和 :after 伪元素，以及它们在CSS中的作用。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是伪元素

在CSS中，伪元素是用来在页面上插入虚拟元素的。它们可以用来在一个元素的内容前面或者后面插入新的内容，并且允许我们通过CSS样式来控制这些虚拟元素。

:before伪元素

:before伪元素被用来在目标元素的内容前面插入新的内容。通过使用:before伪元素，我们可以在目标元素的前面插入文本、图像或者其他内容。

例如，假设我们有以下的HTML代码：

<div class="box">Hello</div>

我们想要在这个<div>元素的内容前面插入一个图标，我们可以使用如下的CSS代码：

.box:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('icon.png');
}

在上面的例子中，我们使用了:before伪元素来在.box元素的内容前面插入了一个空的inline-block元素，并设置了宽度、高度和背景图片。

:after伪元素

:after伪元素和:before伪元素很相似，只不过它是在目标元素的内容之后插入新的内容。同样地，我们可以通过使用:after伪元素来在元素的后面插入文本、图像或其他内容。

让我们看一个例子：

.box:after {
  content: "World";
  display: block;
  color: blue;
}

在上面的例子中，我们使用了:after伪元素并设置了内容为”World”，并且将其显示为块级元素，并且设置了字体颜色为蓝色。这样，我们就在.box元素的内容之后插入了一个新的文本段落。

多个伪元素结合使用

:before和 :after伪元素可以结合使用以实现更复杂的效果。例如，我们可以使用两个伪元素来创建一个CSS三角形：

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}
.triangle:before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid blue;
}

在上面的例子中，我们使用了两个伪元素。.triangle元素本身只是一个没有任何内容的矩形，在:before伪元素中定义了一个“向上”的三角形，在:after伪元素中定义了一个“向下”的三角形。这样，通过结合使用多个伪元素，我们可以创建出许多有趣的效果。