CSS伪元素制作小图标教程

本文深入讲解如何巧妙运用CSS的::before和::after伪元素，仅凭纯CSS代码即可创建圆点、对勾、警告感叹号等轻量级装饰性小图标，无需额外HTML标签；通过精准控制content、绝对定位、背景色、边框样式及transform旋转等核心技巧，实现高效、语义清晰且布局友好的视觉增强，同时强调可访问性原则——让图标既美观实用，又不牺牲信息传达的可靠性，是前端开发者提升UI表现力与代码简洁性的实用指南。

使用 ::before 和 ::after 制作小图标，关键在于利用伪元素的 content、定位、背景或边框来构建视觉图形。它们不需额外 HTML 标签，适合添加装饰性图标。

基本原理与设置

::before 和 ::after 是伪元素，可插入内容并样式化。要显示它们，必须设置 content 属性（即使为空字符串）。通常配合绝对定位，依附于相对定位的父元素。

• 给目标元素设 position: relative
• 伪元素设 position: absolute 并定位到合适位置
• 通过 background、border、transform 等绘制图形

用背景色制作圆形图标

适合简单点状标记，比如状态提示。

.icon-example::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #007acc;
  border-radius: 50%;
}

这样会在文字前加一个蓝色圆点，常用于列表项或状态标识。

用边框绘制对勾图标

通过控制边框方向和旋转，可画出对勾、叉号等形状。

.success::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border: solid green;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

这是经典对勾做法，通过只保留右和下边框，再旋转实现。

组合字符与样式做警告图标

用文本内容结合背景，快速做出感叹号、数字标签等。

.warning::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  color: white;
  background: orange;
  border-radius: 50%;
}

这种适合警示、通知类小图标，直观且易读。

基本上就这些常用方式。关键是灵活运用 content、定位、border 和 transform。注意伪元素默认是行内元素，必要时设 display: block 或 inline-block。小图标不影响布局，但记得考虑可访问性，重要信息别只靠视觉传达。

到这里，我们也就讲完了《CSS伪元素制作小图标教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！