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

想要提升网页的视觉效果，却不想修改HTML结构？CSS的`::before`和`::after`伪元素绝对是你的秘密武器！本文深入解析`::before`和`::after`的使用方法，教你如何利用它们巧妙地为元素添加装饰性内容，例如常见的引号、小三角提示框以及分隔符等。通过`content`属性，你可以轻松插入文字、特殊符号，甚至动态获取属性值。结合定位和样式，`::before`和`::after`能实现各种创意布局，让你的网页设计更加出彩，而且无需修改HTML代码，保持代码的整洁和可维护性。快来学习这些实用技巧，让你的CSS技能更上一层楼！

::before和::after通过content属性为元素添加装饰性内容，常用于引号、三角提示框、分隔符等视觉效果，无需修改HTML结构，结合定位与样式实现丰富布局。

使用 ::before 和 ::after 伪元素可以在不修改HTML结构的前提下，为元素添加装饰性内容。它们通过CSS生成内容，常用于图标、引号、分隔线、悬停效果等视觉增强。

基本语法与content属性

要使用 ::before 或 ::after，必须定义 content 属性，即使为空字符串也能生效。content 可以是文字、特殊符号、计数器或空值。

• content: ""; —— 创建一个空内容，常用于图形装饰
• content: "★"; —— 插入星号作为装饰
• content: attr(data-label); —— 动态插入自定义属性值

制作引号装饰

常用于引用文本的前后添加引号，提升可读性。

.quote {
  position: relative;
  padding: 10px 20px;
}
.quote::before {
  content: "“";
  font-size: 2em;
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
}
.quote::after {
  content: "”";
  font-size: 2em;
  color: #999;
  position: absolute;
  bottom: 0;
  right: 0;
}

创建小三角提示框

用 ::before 或 ::after 绘制三角形，模拟气泡对话框或标签角标。

.tooltip {
  position: relative;
  background: #007bff;
  color: white;
  padding: 10px;
  display: inline-block;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top-color: #007bff; /* 形成向上的三角 */
}

添加分隔符或装饰点

在导航菜单或列表项之间插入小图标或线条。

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 8px;
  color: #ccc;
}

这样每个非末尾的列表项后都会自动出现分隔符，无需手动添加HTML符号。

基本上就这些。只要合理使用定位、尺寸和边框，::before 和 ::after 能实现丰富的视觉装饰，而且不影响语义结构。注意设置 position 和层级（z-index）避免遮挡内容，同时保持可访问性。不复杂但容易忽略。

到这里，我们也就讲完了《CSS伪元素::before和::after使用技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS,伪元素,content属性,::before和::after,装饰性内容的知识点！