CSS伪元素::before和::after技巧分享

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS伪元素::before和::after实用技巧》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

::before和::after伪元素通过content属性生成装饰性内容，可用于添加引号、图标、悬停动画及清除浮动，提升页面表现力与结构简洁性。

在CSS中，::before 和 ::after 伪元素是强大的工具，能帮助开发者在不增加HTML标签的前提下，为元素添加装饰性内容或视觉效果。它们通过CSS生成内容，常用于图标、提示、形状修饰等场景，合理使用可提升页面表现力又保持结构简洁。

1. 添加装饰性内容

利用 ::before 和 ::after 可以在元素前后插入文本或符号，比如引号、箭头、星号等，适合用于强调或美化内容。

例如给引用文字自动添加引号：

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

这样无需在HTML中手动写引号，样式统一且易于维护。

2. 创建几何图形和图标

通过设置宽高、边框和变换，可以用伪元素绘制三角形、圆形、心形等简单图形，常用于提示箭头或装饰角标。

常见用法：下拉按钮的小三角

.arrow-down::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
}

这种方式避免引入额外图标文件，轻量且可缩放。

3. 实现悬浮提示与装饰效果

伪元素非常适合做悬停时的动态装饰，比如给链接添加下划线动画、按钮添加光晕等。

示例：鼠标悬停时从中间展开下划线

.link {
  position: relative;
  text-decoration: none;
}
.link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #007acc;
  transition: all 0.3s ease;
}
.link:hover::after {
  width: 100%;
  left: 0;
}

这种效果流畅自然，增强交互体验。

4. 清除浮动与布局辅助

虽然现代布局多用Flexbox或Grid，但在某些情况下，仍可用伪元素实现 clearfix，防止父容器塌陷。

传统clearfix写法：

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

将该类应用于包含浮动子元素的容器，即可闭合浮动，确保高度正确计算。

基本上就这些。掌握 ::before 和 ::after 的关键在于理解它们是**生成的内容**，必须配合 content 属性使用，且默认是行内元素。合理定位（relative + absolute）、控制层级（z-index）以及善用 transform，能让效果更精准。不复杂但容易忽略细节，比如忘记设置 position 或 content 为空字符串导致不显示。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS伪元素::before和::after技巧分享》文章吧，也可关注golang学习网公众号了解相关技术文章。