MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

CSS伪元素选择器：::before和::after的创意用法

2023-02-234.2k 阅读

CSS 伪元素选择器：::before 和 ::after 的基本概念

在深入探讨 ::before 和 ::after 的创意用法之前，我们先来回顾一下它们的基本概念。

什么是伪元素

伪元素是 CSS 中一种特殊的选择器，用于选取文档中某些特殊的、并非真实存在于 DOM 树中的元素。伪元素以 :: 开头，::before 和 ::after 便是其中两个非常实用的伪元素。它们允许我们在目标元素的内容之前或之后插入额外的内容，并且这些插入的内容可以通过 CSS 进行样式设计，而无需在 HTML 中添加额外的标签。

::before 和 ::after 的语法

selector::before {
  /* 样式规则 */
}

selector::after {
  /* 样式规则 */
}

这里的 selector 可以是任何有效的 CSS 选择器，比如标签选择器（如 p、div）、类选择器（如 .classname）、ID 选择器（如 #idname）等。

它们如何与 DOM 交互

虽然 ::before 和 ::after 插入的内容看起来像是 DOM 的一部分，但实际上它们并不在 DOM 树中。这意味着我们无法通过 JavaScript 直接操作它们，只能通过 CSS 来控制其样式和内容。例如，我们不能给 ::before 或 ::after 元素添加事件监听器，但是可以通过改变父元素的状态（如 :hover）来间接影响它们的样式。

基本用法示例

创建装饰性的前缀和后缀

假设我们有一个导航菜单，每个菜单项前面都需要添加一个小图标。我们可以使用 ::before 伪元素来实现。

<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">服务</a></li>
</ul>

.nav-menu li a::before {
  content: "📌";
  margin-right: 5px;
  color: blue;
}

在这个例子中，我们使用 content 属性在每个 <a> 元素的内容之前插入了一个图标。content 属性是 ::before 和 ::after 伪元素必不可少的属性，它定义了插入的内容。这里我们插入了一个 Unicode 字符表示的图钉图标，并且设置了它的颜色和右边距。

类似地，如果我们想在链接后添加一个后缀，比如一个箭头指向链接的目标，可以使用 ::after。

.nav-menu li a::after {
  content: "→";
  margin-left: 5px;
  color: green;
}

创建分隔线

我们可以利用 ::before 或 ::after 创建水平或垂直的分隔线。

水平分隔线

<div class="section">
  <h2>标题</h2>
  <p>这里是段落内容。</p>
</div>

.section h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: gray;
  margin-top: 10px;
}

在这个例子中，我们在 <h2> 元素之后插入了一个空的 content，通过 display: block 将其设置为块级元素，然后设置宽度为 100%，高度为 2 像素，并为其添加了灰色的背景颜色，从而创建了一条水平分隔线。

垂直分隔线

<ul class="list-with-separator">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

.list-with-separator li::after {
  content: "";
  display: inline-block;
  height: 10px;
  border-right: 1px solid black;
  margin-left: 10px;
  margin-right: 10px;
}
.list-with-separator li:last-child::after {
  border-right: none;
}

这里我们在每个 <li> 元素之后插入了一个空内容，并将其设置为内联块级元素。通过设置右边框为 1 像素宽的黑色实线，创建了垂直分隔线。对于最后一个 <li> 元素，我们使用 :last-child 选择器移除了它的右边框，避免出现多余的分隔线。

创意用法：模拟 UI 组件

模拟按钮的加载状态

在现代 Web 应用中，按钮常常会有加载状态。我们可以利用 ::before 和 ::after 来模拟这种加载效果。

<button class="loading-button">提交</button>

.loading-button {
  position: relative;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

.loading-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 15px;
  height: 15px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.loading-button.loading::before {
  opacity: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

在这个代码中，我们首先为按钮设置了一个相对定位。::before 伪元素被设置为绝对定位，并位于按钮内部的左侧。通过设置 border 属性，我们创建了一个类似加载指示器的圆形，其中顶部边框颜色与按钮文本颜色相同，以显示旋转效果。animation 属性定义了旋转动画，opacity 属性控制加载指示器的显示与隐藏。当按钮添加了 loading 类时，指示器会显示出来。

创建自定义下拉菜单箭头

原生的 HTML 下拉菜单箭头在样式上往往比较受限。我们可以使用 ::after 伪元素创建一个自定义的下拉菜单箭头。

<select class="custom-select">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
  border: 1px solid gray;
  padding: 5px 20px 5px 5px;
  position: relative;
}

.custom-select::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: gray;
}

在上述代码中，我们首先使用 appearance 属性去除了浏览器默认的下拉箭头样式。然后，通过 ::after 伪元素在下拉菜单的右侧插入了一个自定义的箭头字符，并通过 position 和 transform 属性将其垂直居中显示。

创意用法：实现复杂的布局效果

网格布局中的间隔

在网格布局中，我们通常需要在网格项之间添加间隔。虽然可以使用 gap 属性来实现，但有时使用 ::before 和 ::after 可以提供更灵活的控制。

<div class="grid-container">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

.grid-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: lightgray;
  z-index: -1;
}

.grid-item:not(:first-child)::before {
  left: -10px;
}

在这个例子中，我们为每个网格项的 ::before 伪元素创建了一个 10 像素高的灰色条作为间隔。对于除第一个网格项之外的其他项，我们将 left 属性设置为 -10px，使其覆盖到前一个网格项的右侧，从而实现了网格项之间的间隔效果。z - index: -1 确保了这个间隔条在网格项内容的下方。

自适应的图片遮罩

在展示图片时，有时需要在图片上添加一个遮罩层，并且遮罩层的透明度可以根据图片的大小自适应调整。

<div class="image-container">
  <img src="example.jpg" alt="示例图片">
</div>

.image-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover::after {
  opacity: 1;
}

这里我们在 image - container 元素上使用 ::after 创建了一个半透明的黑色遮罩层。初始时，遮罩层的 opacity 为 0，即不可见。当鼠标悬停在图片容器上时，遮罩层的 opacity 变为 1，从而显示出来。这种效果可以用于在图片上添加一些文字说明等交互效果。

创意用法：增强用户体验

提示工具提示

工具提示是一种常见的增强用户体验的方式，它可以在用户悬停在元素上时显示额外的信息。我们可以使用 ::before 或 ::after 来创建工具提示。

<button class="tooltip-button" data - tooltip="这是一个按钮的说明">点击我</button>

.tooltip-button {
  position: relative;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

.tooltip-button::after {
  content: attr(data - tooltip);
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.tooltip-button:hover::after {
  opacity: 1;
}

在这段代码中，我们通过 attr(data - tooltip) 从按钮的 data - tooltip 属性中获取工具提示的文本内容。::after 伪元素被设置为绝对定位，并位于按钮下方。通过 opacity 的变化实现工具提示的显示与隐藏，当鼠标悬停在按钮上时，工具提示会以淡入的效果显示出来。

鼠标悬停时的动画引导

在一些网页设计中，我们希望在用户鼠标悬停在某个元素上时，通过动画引导用户进行下一步操作。

<a href="#" class="animated - link">点击这里</a>

.animated - link {
  position: relative;
  display: inline - block;
  color: blue;
  text - decoration: none;
}

.animated - link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: blue;
  transition: width 0.3s ease;
}

.animated - link:hover::after {
  width: 100%;
}

.animated - link::before {
  content: "👉";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.animated - link:hover::before {
  opacity: 1;
}

在这个例子中，当用户鼠标悬停在链接上时，首先链接下方会出现一条从左到右展开的蓝色下划线，同时链接右侧会淡入一个箭头，引导用户点击链接。通过 ::before 和 ::after 以及 CSS 过渡效果，我们实现了这种增强用户体验的交互效果。

创意用法：生成艺术效果

创建图案背景

我们可以利用 ::before 和 ::after 生成一些简单的图案背景，而无需使用图片。

<div class="pattern - background"></div>

.pattern - background {
  width: 100%;
  height: 100vh;
  position: relative;
}

.pattern - background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background - image: repeating - linear - gradient(45deg, #f0f0f0 0px, #f0f0f0 10px, #ffffff 10px, #ffffff 20px);
}

.pattern - background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background - image: repeating - linear - gradient(-45deg, #f0f0f0 0px, #f0f0f0 10px, #ffffff 10px, #ffffff 20px);
  opacity: 0.5;
}

在这个代码中，我们通过 ::before 和 ::after 创建了两个相互交叉的线性渐变图案，::after 的图案设置了 0.5 的透明度，从而生成了一个类似棋盘格的图案背景。repeating - linear - gradient 函数使得渐变图案可以重复，从而覆盖整个背景区域。

生成装饰性的形状

我们可以使用 ::before 和 ::after 生成一些装饰性的形状，如星星、爱心等。

<div class="star - decoration"></div>

.star - decoration {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
}

.star - decoration::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0;
  height: 0;
  border - left: 25px solid transparent;
  border - right: 25px solid transparent;
  border - bottom: 40px solid yellow;
}

.star - decoration::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border - left: 25px solid transparent;
  border - right: 25px solid transparent;
  border - top: 40px solid yellow;
}

通过 border 属性和 transform 属性的组合，我们在 star - decoration 元素上创建了一个黄色的星星形状。::before 和 ::after 分别创建了星星的上下两个部分，通过旋转和定位使其组合成一个完整的星星。

注意事项和兼容性

注意事项

  1. content 属性的必要性：::before 和 ::after 伪元素必须设置 content 属性，即使内容为空（即 content: "";）。否则，伪元素不会显示。
  2. 与其他选择器的组合：在使用复杂选择器时，要注意 ::before 和 ::after 与其他选择器的优先级和组合方式。例如，a:hover::after 表示当 <a> 元素被悬停时，其 ::after 伪元素的样式。
  3. 对布局的影响：由于 ::before 和 ::after 插入的内容会影响文档流，特别是当它们被设置为块级元素时，要注意对周围元素布局的影响。合理使用 position 属性和 z - index 可以避免布局问题。

兼容性

::before 和 ::after 这两个伪元素在现代浏览器中都有很好的支持。然而，在一些较老的浏览器中，可能需要使用单冒号 :before 和 :after 语法。为了确保兼容性，可以同时提供两种语法：

selector::before,
selector:before {
  /* 样式规则 */
}

selector::after,
selector:after {
  /* 样式规则 */
}

不过，从 CSS3 规范开始，推荐使用双冒号 :: 语法来明确区分伪元素和伪类，单冒号语法更多地用于兼容旧版本浏览器。在实际项目中，应根据目标浏览器的使用情况来决定是否需要兼容旧语法。

通过深入理解和巧妙运用 ::before 和 ::after 伪元素选择器，前端开发者可以在不增加过多 HTML 结构的情况下，实现丰富多样的创意效果，提升网页的视觉效果和用户体验。无论是模拟 UI 组件、实现复杂布局，还是增强用户体验和生成艺术效果，这两个伪元素都为我们提供了强大的工具。同时，在使用过程中要注意其基本概念、语法规则、注意事项以及兼容性，以确保代码在各种环境下都能正常运行。