伪元素可替代纯装饰性html标签，如分隔符、图标、引号、箭头等；但需显式设置content属性，注意定位、可访问性及状态同步问题。
伪元素能替代哪些HTML装饰标签
伪元素 ::before 和 ::after 不是用来“加内容”的，而是用来“画装饰”的——只要不涉及语义、交互或SEO，纯视觉修饰基本都能抽出来。
常见被替代的 HTML 模式：
-
<span class="divider">|</span>→ 用::after画竖线或分隔条 -
<div class="icon-close"></div>（仅背景图）→ 用::before+content: ""+background-image -
<span class="quote-mark">“</span>→ 改用blockquote::before { content: "“"; } - 按钮右箭头
<span class="arrow">→</span>→ 改为button::after { content: "→"; margin-left: 4px; }
注意：如果那个符号要被屏幕阅读器读出（比如“搜索按钮”旁的放大镜图标），就不能只靠伪元素，得保留可访问的 <svg></svg> 或带 aria-label 的真实元素。
content 属性的坑：空字符串不是万能解
content 是伪元素生效的前提，但写错就等于没写。最常踩的三个点：
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
content: ""（哪怕为空），否则::before/::after根本不渲染 -
content: none是无效值，浏览器会忽略整条规则 - 想插入图标字体（如 Font Awesome）得用 Unicode，例如
content: "\f002";，且必须确保父元素有对应字体族：font-family: "Font Awesome 5 Free";
别信“设了 display: block 就能撑开”，没 content，啥都没有。
伪元素定位失效？检查 display 和 position 配合
伪元素默认是 inline，没法直接用 top/left 定位，这是布局错乱的主因。
- 要绝对定位：先设
position: relative在父元素上，再给伪元素加position: absolute - 要居中一个装饰圆点：
::after { content: ""; display: block; width: 6px; height: 6px; background: #333; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 如果父元素是
display: flex，伪元素也能当 flex item 用，但需显式设display: block（否则可能被当成文本节点处理）
Flex 容器里伪元素的 order、align-self 都可用，但别指望它自动继承父级的 justify-content 行为。
伪元素影响可访问性和打印样式吗
不影响可访问性——屏幕阅读器默认忽略 ::before/::after 的 content，这是规范行为，也是优点。但这也意味着你不能靠它传关键信息。
- 打印时默认会渲染伪元素，除非显式写
@media print { ::before, ::after { content: none; } } - 某些老版本 Safari 对
content插入长 Unicode 字符串（如 emoji）支持不稳定，建议用 SVG 或图片后备 - 伪元素无法绑定 JS 事件，
document.querySelector("::after")是非法操作，想交互就得用真实 DOM 节点
真正难的是状态同步：比如一个按钮的激活态要用伪元素画边框动画，那它的 :active 或 .is-active 类就得同时控制真元素样式和伪元素表现，漏掉一个，视觉就断层。
