::before 和 ::after 通过 content 属性为元素前后添加生成内容，常用于装饰或提示；必须设置 content 才能生效，可插入文本、属性值或图片，默认为行内元素，适用于非自闭合标签，注意不可用于 img 等自闭合元素，且内容不被选中、抓取或读屏设备识别，适合非关键性视觉增强。
CSS伪元素 ::before 和 ::after 是非常实用的工具，可以在不修改HTML结构的前提下，为元素添加额外内容或装饰性样式。它们不会出现在DOM中，而是通过CSS在指定元素的前后插入生成的内容，常用于图标、提示、装饰线等场景。
基本语法与使用条件
伪元素 ::before 和 ::after 必须配合 content 属性使用，否则不会显示。content 可以是文本、空字符串、引用属性值，甚至是URL引入的图片。
常见写法示例：content: ""; —— 插入空内容，常用于纯装饰（如清除浮动、添加形状） content: "提示："; —— 插入固定文字 content: attr(data-tip); —— 引用元素的 data-tip 属性值 content: url(icon.png); —— 插入图片
这两个伪元素默认是 inline 元素，可根据需要设置 display 类型，如 block、flex 等。
添加内容：增强语义与提示
利用 ::before 或 ::after 可以动态添加说明性文字，提升可读性而不污染HTML。
立即学习“前端免费学习笔记（深入）”；
Cowriter
AI 作家，帮助加速和激发你的创意写作
107 查看详情 示例：为链接添加外部链接标识
a[href^="http"]:after { content: " (外链)"; color: #999; font-size: 0.9em;}
这样所有以 http 开头的链接后都会自动加上“ (外链)”提示，便于用户识别。
装饰性用途：实现小图标与样式增强
结合 border、transform、background 等属性，::before 和 ::after 能创建各种装饰效果，比如引号、三角形、下划线动画等。
常见应用场景：引用块前加引号：content: "“"; font-size: 2em; color: #ccc; 按钮悬停时添加箭头：content: "->"; margin-left: 5px; opacity: 0; 配合 transition 实现平滑出现 气泡对话框的三角箭头：用 ::after 创建一个带边框的三角形并定位到指定位置
注意事项与最佳实践
虽然伪元素功能强大，但使用时需注意以下几点：
只能应用于支持生成内容的元素，如 div、p、a 等，不能用于自闭合标签（如 img、input） content 中的文本无法被选中或复制，不适合关键信息展示 SEO 不会抓取伪元素内容，重要文字建议写在HTML中 可访问性方面，屏幕阅读器通常忽略伪元素内容，必要时配合 aria-label 使用
基本上就这些。合理使用 ::before 和 ::after 能让页面更简洁、样式更灵活，关键是掌握 content 的用法和定位技巧。不复杂但容易忽略细节。
以上就是CSS伪元素::before与::after使用方法_添加内容与装饰的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/951764.html
微信扫一扫 
支付宝扫一扫 
