使用::before和::after伪元素可创建装饰性小图标，无需额外HTML标签。通过设置content、position、background、border和transform等属性，实现圆点、对勾、警告等视觉效果，常用于状态提示。关键步骤包括：父元素设position: relative，伪元素设position: absolute并定位，利用背景或边框绘制图形。例如，蓝色圆点用border-radius圆形背景；对勾通过border-width控制边框方向并旋转45度；警告图标则结合文本”!”与圆形背景。注意伪元素默认为行内元素，必要时调整display类型，并确保内容可访问，不依赖纯视觉表达。
.icon-example { position: relative; padding-left: 20px; margin: 15px 0;}.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; display: inline-block; padding: 3px; margin-right: 6px; 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; font-weight: bold; color: white; background-color: orange; border-radius: 50%; font-family: Arial, sans-serif;}
使用 ::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%;}
这样会在文字前加一个蓝色圆点，常用于列表项或状态标识。
立即学习“前端免费学习笔记（深入）”；
用边框绘制对勾图标
通过控制边框方向和旋转，可画出对勾、叉号等形状。
AutoIt3 中文帮助文档打包
AutoIt v3 版本, 这是一个使用类似 BASIC 脚本语言的免费软件, 它设计用于 Windows GUI(图形用户界面)中进行自动化操作. 利用模拟键盘按键, 鼠标移动和窗口/控件的组合来实现自动化任务. 而这是其它语言不可能做到或无可靠方法实现的(比如VBScript和SendKeys). AutoIt 非常小巧, 完全运行在所有windows操作系统上.(thesnow注:现在已经不再支持win 9x,微软连XP都能放弃, 何况一个win 9x支持), 并且不需要任何运行库. AutoIt
53 查看详情
.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中如何用::before和::after制作小图标的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1039114.html
微信扫一扫 
支付宝扫一扫 
