CSS::before和::after用法详解

**CSS ::before 和 ::after 伪元素：打造精美网页装饰的利器** 想为你的网页增添更多视觉吸引力，又不想修改繁琐的 HTML 结构？CSS 的 `::before` 和 `::after` 伪元素是你的理想选择！它们通过 `content` 属性，允许你在元素内容前后插入文本、图标、图形等装饰性内容，例如添加引号、符号、分隔符等。本文将深入讲解 `::before` 和 `::after` 的基本用法、常见装饰技巧，以及如何结合 CSS 样式实现更复杂的视觉效果，助你轻松打造美观、专业的网页界面。务必记住，`content` 属性是伪元素生效的关键哦！

必须设置content属性才能生效，::before和::after用于在元素前后插入装饰性内容，如引号、图标、分隔符等，不影响文档结构仅用于视觉效果，可结合样式实现复杂设计。

CSS 的 ::before 和 ::after 伪元素用于在元素的内容之前或之后插入装饰性内容，通常配合 content 属性使用。它们不会影响文档结构，只在渲染层添加视觉效果，适合做图标、引号、分隔符等装饰。

::before 与 ::after 基本语法

要使用这两个伪元素，必须设置 content 属性，即使为空也要写成 content: "";，否则伪元素不会生效。

.element::before {
  content: "★";
  color: gold;
}

.element::after {
  content: " (注)";
  color: gray;
}

上面代码会在 .element 内容前加一个星号，后面加“ (注)”灰色文字。

常见装饰用法示例

以下是一些实用的装饰场景：

• 添加引号：适合引用文本

blockquote::before {
  content: "“";
  font-size: 1.5em;
  color: #888;
}
blockquote::after {
  content: "”";
  font-size: 1.5em;
  color: #888;
}
  

• 插入图标或符号：比如用 Font Awesome 或 Unicode 字符

.link::after {
  content: " →";
  color: blue;
}
  

• 添加分隔符：如项目之间加竖线

.list-item:not(:last-child)::after {
  content: " | ";
  color: #ccc;
}
  

结合样式增强视觉效果

伪元素不只是插文字，还能通过 CSS 样式做出更复杂的装饰，比如背景、边框、定位等。

.tip::before {
  content: "!";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #007acc;
  color: white;
  text-align: center;
  border-radius: 50%;
  margin-right: 8px;
  font-weight: bold;
}

这样就在提示文字前创建了一个小圆形图标，提升可读性和美观度。

基本上就这些。只要记得 必须写 content，然后就可以自由发挥添加各种装饰内容。不复杂但容易忽略细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~