CSS 什么是 ::before和::after

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

阅读更多：CSS 教程

::before 和 ::after 是什么？

在CSS中，::before和::after是伪元素，用于在HTML元素的内容之前和之后插入额外的内容。它们不是真正的HTML元素，而是可以使用CSS样式来控制它们的展示和布局。 “::before”表示在元素内容之前插入，而“::after”表示在元素内容之后插入。

如何使用 ::before 和 ::after?

使用::before和::after时，通常需要设置content属性来指定插入的内容。同时，使用CSS样式来控制伪元素的展示和布局。

例如，我们可以使用::before和::after来为链接的文字前后添加括号：

<a href="#" class="link">这是一个链接</a>

.link::before {
  content: "(";
}

.link::after {
  content: ")";
}

通过上述代码，链接的文字将会在前面添加一个左括号，后面添加一个右括号。

操作 ::before 和 ::after的CSS 属性

除了使用content属性来定义插入的内容之外，我们还可以使用其他CSS属性来控制伪元素的展示和布局。以下是一些常用的属性：

display：设置为”block”，伪元素将被视为块级元素，会独占一行。设置为”inline”，伪元素将被视为内联元素，会与其它内联元素在同一行显示。
position：设置为”absolute”，使伪元素相对于其父元素定位。设置为“relative”，使伪元素相对于其正常位置进行定位。
width 和 height：控制伪元素的宽度和高度。
background：设置伪元素的背景样式，如颜色、图片等。
border：设置伪元素的边框样式，包括颜色、宽度和样式。
content：设置伪元素的内容。可以是一个字符串，也可以使用attr()函数获取属性值。

通过组合使用这些属性，我们可以实现各种各样的效果和布局。

::before 和 ::after的示例

以下是一些使用::before和::after的示例：

示例1：添加图标

<span class="icon">图标</span>

.icon::before {
  content: url("icon.png");
  margin-right: 5px;
}

上述代码中，使用::before伪元素在文字前插入一个图标。我们通过设置content属性为图片的URL来实现。

示例2：创建自定义列表

.custom-list::before {
  content: "• ";
  font-weight: bold;
}

.custom-list {
  list-style: none;
}

.custom-list li {
  margin-bottom: 5px;
}

上述代码中，我们使用::before来为列表项前添加一个实心圆点，并通过设置font-weight属性使其加粗。通过设置list-style为none，我们隐藏了默认的列表样式。

示例3：创建对话框

<div class="dialog">对话框内容</div>

.dialog::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 20px;
  background-color: #000;
}

.dialog {
  position: relative;
  padding: 10px;
  color: #fff;
}

上述代码中，我们使用::before伪元素创建了一个位于对话框上方的黑色条形。通过设置position为absolute，我们使得伪元素相对于其父元素定位。通过设置top、left和transform属性，我们使伪元素居中并位于对话框的上方。