CSS伪元素::before和::after使用技巧

golang学习网今天将给大家带来《CSS伪元素::before和::after常用于在元素内容前后插入装饰性内容，如图标、边框、背景等。它们是通过content属性来添加内容的，但需要注意以下几点：1. 基本用法.element::before { content: "前缀"; } .element::after { content: "后缀"; }注意：content 属性是必须的，即使你只是想添加空内容。如果不设置 content，伪元素不会显示。2. 添加图标（使用字体图标或SVG）使用字体图标（如 Font Awesome）：.icon::before { content: "\f007"; /* 字体图标的 Unicode 编码 */ font-family: "Font Awesome 5 Free"; }使用 SVG 图标（内联方式）：.icon::before { content: url('icon.svg'); }3. 添加装饰性边框或背景.decoration::before { content: ""; display: block; width: 100%; height: 2px; background: #000; }4. 创建三角形或箭头 .arrow::after { content: ""; display: inline-block》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

必须设置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，然后就可以自由发挥添加各种装饰内容。不复杂但容易忽略细节。

终于介绍完啦！小伙伴们，这篇关于《CSS伪元素::before和::after使用技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！