CSS伪元素选择器指南：before和after的妙用

要正确使用 css 的 ::before 和 ::after 伪元素，首先必须设置 content 属性；1. 插入内容时可使用文本、unicode 字符或图片；2. 默认为 inline 元素，需根据布局需求调整 display 类型；3. 常用于添加装饰性内容如图标、分隔符等；4. 可辅助清除浮动或创建视觉效果如高亮层和阴影；5. 注意伪元素不可交互、content 不可省略且需处理好层级关系。

CSS 的 ::before 和 ::after 伪元素，是前端开发中非常实用的小工具。它们可以在不修改 HTML 结构的前提下，为元素添加额外的内容或样式，常用于装饰、图标插入、内容补充等场景。

如何正确使用 before 和 after？

这两个伪元素的基本用法都离不开 content 属性，它决定了你要插入什么内容。最简单的例子：

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

这段代码会在 .element 元素内容前面插入一个星号。需要注意几点：

立即学习“前端免费学习笔记（深入）”；

• 必须写 content，否则伪元素不会显示；
• 插入的内容是纯文本，也可以是 Unicode 字符或图片（通过 url()）；
• 伪元素默认是 inline 元素，如果需要布局控制，建议设置为 display: block 或 inline-block。

常见用途：添加装饰性内容

伪元素最常见的用途之一就是添加小图标、分隔符或者装饰边框。例如，在导航栏每个链接前加一个小点：

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

94

查看详情

.nav-link::before {
  content: "•";
  margin-right: 5px;
  color: #999;
}

这种方式比在 HTML 中一个个写上更简洁，也更容易统一风格。类似地，你还可以用来做“引号”、“箭头”、“下划线动画”等效果。

样式增强：清除浮动和视觉修饰

在早期的 CSS 布局中，::after 常被用来清除浮动（虽然现在 Flex 和 Grid 更流行了）。比如经典的 clearfix 技巧：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

此外，伪元素还经常用于创建视觉上的“叠加层”或“阴影”。例如，给按钮加上一个半透明的 hover 高亮层：

.button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}

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

这种做法可以避免增加额外 DOM 节点，保持结构干净。

注意事项与常见问题

• 伪元素不能被选中或聚焦，所以不适合放重要交互内容；
• content 可以为空字符串，但不能省略；
• 伪元素可以配合 attr() 使用，读取 HTML 属性内容，比如：

.tooltip::after {
  content: attr(data-tip);
}

• 伪元素层级问题：记得检查 z-index 和定位关系，尤其是在覆盖其他元素时。

基本上就这些。before 和 after 看似简单，但在实际项目中灵活运用能解决不少小问题，而且对页面结构影响小，值得一试。

以上就是CSS伪元素选择器指南：before和after的妙用的详细内容，更多请关注php中文网其它相关文章！