::before 和 ::after 是用于视觉修饰的轻量工具，仅支持不可选、不可读、不进 dom 的装饰性内容，适用于图标、边框、占位符和几何图形等场景，但不可替代可访问性语义。

::before 和 ::after 不是装饰玩具，而是解决真实 UI 问题的轻量工具——但必须守住一条线：它们插入的内容不可选、不可读、不进 DOM，所以只适合视觉修饰。

给图标或状态加前缀/后缀（比如电话号前加 ☎）

常见错误是直接把关键信息塞进 content，比如用 ::before 插入“联系电话：”，结果屏幕阅读器读不到，用户也复制不了。正确做法是仅放纯装饰性符号。

• 用 content: "☎"; 给 .phone 元素加图标，文字本身仍保留在 HTML 中
• 避免用 content: attr(data-label) 替代可访问的 aria-label，因为 attr 取值不被辅助技术识别
• 图标字体（如 Font Awesome）更推荐用 font-family + 字符码，比图片 URL 更可控、缩放不失真

实现无额外标签的装饰边框或分割线

比如卡片底部加细线、按钮悬停下划线、列表项之间的分隔条——全靠 ::after 就能搞定，不用多写一个 <div class="divider"></div>。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ::after 默认是 display: inline，要铺满宽度得加 display: block 或 position: absolute
• 若父容器没设 position: relative，absolute 定位会相对于最近的定位祖先，容易错位
• 用 transform: scaleX(0) + transition 做下划线生长动画，比改 width 更高性能（不触发重排）

图片加载失败时 fallback 占位（破碎图兜底）

浏览器原生的破损图标丑且不一致，::before 能统一控制样式，但要注意它不能响应图片的自然宽高。

• 必须给 img 设 position: relative，否则伪元素会脱离图片流
• content: attr(alt) 只取 alt 属性值，如果 alt="" 就啥也不显示；建议 fallback 文案简短，避免换行溢出
• 伪元素无法监听图片加载状态，所以它只是“视觉兜底”，不是真正的加载失败检测方案
• 现代方案应优先用 <picture></picture> + onerror JS 处理，伪元素仅作降级补充

创建纯 CSS 的几何图形或小图标（如三角形、圆点）

不需要 SVG 或图标字体时，::before / ::after 配合 border 技巧就能画出箭头、对话气泡尖角、loading 圆点等。

• 画三角形本质是把三边设透明，留一边有色：border: 10px solid transparent; border-top-color: #333;
• 两个伪元素叠加可做双色 loading 点，但注意 animation 在伪元素上需显式写 animation: spin 1s infinite，不能靠继承
• 这类图形无法设置 fill 或 stroke，颜色只能靠 border-color 或 background 控制

最容易被忽略的是：伪元素的渲染时机晚于主元素，某些依赖尺寸的动画（比如从 height: 0 展开）在伪元素上表现不稳定；真正需要动态控制内容时，还是得回到 JS 操作真实 DOM。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！