::before 和 ::after 可在不修改HTML的情况下为元素添加装饰性内容，必须配合content属性使用，常用于插入文本、图标、特殊符号或创建气泡箭头、边框高光等视觉效果，提升页面表现力。
CSS伪元素::before和::after能在不修改HTML结构的前提下，为元素添加装饰性内容或视觉效果。它们不会出现在DOM中，但可以在页面上渲染出额外的内容或样式，常用于图标、提示、装饰线条等场景。
::before 与 ::after 基本语法这两个伪元素必须配合content属性使用，否则不会显示。content 可以是文本、引号、计数器，甚至为空字符串（用于纯装饰）。
::before {content: "提示：";color: red;}::after {content: " ✉";font-size: 12px;}上面的代码会在元素内容前加上“提示：”，后面加一个邮件图标。
插入动态内容与特殊符号利用 content 插入静态或Unicode字符，增强可读性或美观度。
立即学习“前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载用\00a9显示 © 版权符号用\2713显示 ✓ 对勾结合 attr() 提取HTML属性值，如显示链接标题：a::after { content: " (" attr(title) ")"; }创建装饰性图形与样式通过定位和形状控制，::before 和 ::after 可以绘制小三角、阴影、边框高光等视觉元素。
制作气泡对话框的小箭头：
利用 ::after 创建一个三角形，通过 border 模拟，再绝对定位到主体旁。
为标题添加装饰线或图标：
在 h3::before 中设置 content: ""; 并用 background 或 border 绘制竖条或点。
实现双层文字阴影或发光效果：使用 ::before 覆盖文字并设置模糊和颜色，形成外发光。
实用技巧与注意事项合理使用能提升表现力，但也需注意可访问性和维护性。
若插入的内容对理解至关重要（如必填标记 *），应放在HTML中，避免屏幕阅读器忽略content 为空时仍需写成 content: "";伪元素默认是 inline，根据需要设置 display: block、inline-block 等可结合 CSS 动画，比如 hover 时从 ::before 拉出一条下划线基本上就这些。掌握 ::before 和 ::after 的用法，能让页面细节更精致，又不增加HTML负担。关键是用得恰当，别让装饰干扰内容本身。