::before和::after通过content属性为元素添加装饰性内容，常用于引号、三角提示框、分隔符等视觉效果，无需修改HTML结构，结合定位与样式实现丰富布局。
使用 ::before 和 ::after 伪元素可以在不修改HTML结构的前提下，为元素添加装饰性内容。它们通过CSS生成内容，常用于图标、引号、分隔线、悬停效果等视觉增强。
基本语法与content属性
要使用 ::before 或 ::after，必须定义 content 属性，即使为空字符串也能生效。content 可以是文字、特殊符号、计数器或空值。
常见写法：content: ""; —— 创建一个空内容，常用于图形装饰content: "★"; —— 插入星号作为装饰content: attr(data-label); —— 动态插入自定义属性值
制作引号装饰
常用于引用文本的前后添加引号，提升可读性。
.quote { position: relative; padding: 10px 20px;}.quote::before { content: "“"; font-size: 2em; color: #999; position: absolute; top: 0; left: 0;}.quote::after { content: "”"; font-size: 2em; color: #999; position: absolute; bottom: 0; right: 0;}
创建小三角提示框
用 ::before 或 ::after 绘制三角形，模拟气泡对话框或标签角标。
立即学习“前端免费学习笔记（深入）”；
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
.tooltip { position: relative; background: #007bff; color: white; padding: 10px; display: inline-block;}.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -10px; border: 10px solid transparent; border-top-color: #007bff; /* 形成向上的三角 */}
添加分隔符或装饰点
在导航菜单或列表项之间插入小图标或线条。
.breadcrumb li:not(:last-child)::after { content: "›"; margin: 0 8px; color: #ccc;}
这样每个非末尾的列表项后都会自动出现分隔符，无需手动添加HTML符号。
基本上就这些。只要合理使用定位、尺寸和边框，::before 和 ::after 能实现丰富的视觉装饰，而且不影响语义结构。注意设置 position 和层级（z-index）避免遮挡内容，同时保持可访问性。不复杂但容易忽略。
以上就是在css中如何用::before和::after制作装饰性内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1022428.html
微信扫一扫 
支付宝扫一扫 
