要正确使用 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。
常见用途：添加装饰性内容
伪元素最常见的用途之一就是添加小图标、分隔符或者装饰边框。例如，在导航栏每个链接前加一个小点：
腾讯Effidit
腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验
65 查看详情
.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的妙用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1097947.html
微信扫一扫 
支付宝扫一扫 
