使用::before和::after伪元素可为元素添加装饰性内容，需配合content属性生效，常用于插入图标、符号或样式修饰，如标题箭头、列表圆点、引用引号等，提升视觉效果且不改变HTML结构，保持语义清晰，适用于非关键信息的展示。
使用CSS伪元素选择器可以在不修改HTML结构的情况下，为元素添加装饰性内容。这些内容通常用于样式增强，比如插入图标、修饰符或简单的文本提示，且不会影响文档的语义结构。
CSS提供了两个主要的伪元素来添加装饰内容：
这两个伪元素必须配合 content 属性使用，否则不会生效。
通过 content 属性定义要插入的内容，可以是纯文本、特殊符号、计数器或引用属性值。
立即学习“前端免费学习笔记（深入）”；
示例：在每个标题后添加一个装饰性箭头
h2::after {
content: " →";
color: #888;
}
这样所有 h2 标题后面都会显示一个灰色右箭头，仅用于视觉提示，不影响HTML结构。
伪元素常用来创建不需要额外标签的图形效果，比如小圆点、边框延伸、悬浮提示等。
示例：为列表项添加小圆点装饰
li::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background-color: #007acc;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
这个小圆点由CSS生成，无需在HTML中加入额外的 span 或 i 标签。
content 支持插入特殊符号，如引号、心形、箭头等，可以直接写入或使用Unicode编码。
示例：为引用文字添加引号
blockquote::before {
content: "“";
font-size: 1.5em;
color: #aaa;
}
blockquote::after {
content: "”";
font-size: 1.5em;
color: #aaa;
}
这样就能自动为每段引用加上美观的引号，保持HTML简洁。
基本上就这些。合理使用 ::before 和 ::after 能有效减少冗余标签，提升样式的可维护性，同时让装饰内容与结构分离，更符合现代前端开发实践。注意：伪元素添加的内容仅用于展示，不适合放置关键信息或SEO相关内容。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
793
收藏
