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

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《CSS伪元素::before和::after使用技巧》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

答案：::before与::after需配合content使用，可添加装饰内容、图形或实现自动编号，常用于增强视觉效果与布局灵活性。

使用 ::before 与 ::after 伪元素，可以在不修改 HTML 的情况下为元素添加装饰性内容或结构增强。掌握一些实用技巧，能让 CSS 更加灵活高效。

基本语法与content属性

这两个伪元素必须配合 content 属性使用才能显示内容，即使内容为空也要写上空字符串。

示例：

.quote::before {
  content: "“";
  font-size: 2em;
}
.quote::after {
  content: "”";
}

创建装饰性图形

利用 ::before 和 ::after 制作图标、小标记或形状，减少图片依赖。

常见技巧：

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0; 
  height: 0;
  border: 5px solid transparent;
  border-top-color: #000;
  transform: translateX(-50%);
}

辅助布局与视觉增强

在不增加 DOM 结构的前提下提升界面表现力。

例子：给外部链接加图标

a[href^="http"]::after {
  content: "↗";
  font-size: 0.8em;
  color: #999;
  margin-left: 4px;
}

结合CSS计数器实现自动编号

在文章标题、步骤列表中动态生成序号，维护更方便。

ol {
  counter-reset: step-counter;
}
.step::before {
  counter-increment: step-counter;
  content: "Step " counter(step-counter) ": ";
}

基本上就这些常用场景。关键是理解伪元素是行内元素，默认不占布局空间，通常要设 position 或 display 才能精准控制位置和尺寸。合理使用能简化结构，提升可维护性。

好了，本文到此结束，带大家了解了《CSS伪元素::before和::after实用技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！