::after不能隐藏HTML中已有的符号，因为它只能插入内容而无法删除或覆盖已渲染文本；真正可用场景是控制伪元素自身生成的符号显隐，核心参数是content。
为什么::after不能直接“隐藏”已有符号
因为::after只能插入内容，不能删除或覆盖页面上已渲染的文本。你看到的结尾下划线、短横线或_，如果已经写在 HTML 里（比如<p>标题_</p>），伪元素对它完全无感——它不参与 DOM 树，更没法“擦掉”真实字符。
所以真正能用::after“过滤”的，仅限于：你本就打算用伪元素生成结尾符号，但想根据条件不显示它。
- 常见错误现象：
::after加了display: none却没效果 → 伪元素不支持display: none，必须用content: ""清空 - 使用场景：统一用伪元素渲染分隔符（如
·、|、_），但最后几项不需要 - 关键参数差异：
content是唯一控制“显隐”的开关；visibility: hidden或opacity: 0只是藏起来，仍占布局空间
用:not(:last-child)::after精准控制末尾不显示
这是最常用也最可靠的方案：只给非最后一个子元素添加伪内容，从源头避免“多余符号”出现。
比如列表项后加_，但最后一项不要：
立即学习“前端免费学习笔记（深入）”；
.item:not(:last-child)::after {
content: "_";
}
- 兼容性：IE9+ 支持
:not()和::after，但 IE8 只认:after（单冒号），且不支持:not()→ 若需兼容 IE8，得用 JS 或额外 class 控制 - 性能影响：纯 CSS，无运行时开销；但注意
:last-child匹配的是 DOM 顺序，不是逻辑顺序（比如被display: none的元素仍算在内） - 容易踩的坑：如果父容器里混有其他类型子元素（如
<span>、注释节点），:last-child可能选错目标 → 改用:last-of-type或加明确 class 更稳妥
用content: ""动态清空已设的伪内容
当无法修改结构选择器（比如第三方组件封装死了类名），又必须“关掉”某个::after，就靠重置content。
例如某组件默认带::after { content: "_"; }，你想在特定状态下去掉：
.component.hide-underscore::after {
content: "";
}
- 注意：
content: none无效，必须是content: ""（空字符串） - 优先级问题：新规则必须和原规则同权重，或更高；否则会被覆盖 → 建议复用原选择器再追加类，而非单纯写
::after { content: "" } - 不要试图用
content: " "（空格）替代——它会生成空白字符，可能引发换行或间距异常
真正要“过滤”HTML 中的_？别碰::after
如果下划线是写死在 HTML 里的（比如<h2>章节名_</h2>），::after完全无能为力。这时候该做的不是 CSS 折腾，而是：
- 让后端 / 模板层控制输出，把
_作为可选字段，而非硬编码 - 前端 JS 截取字符串：
el.textContent = el.textContent.replace(/_$/, "")（仅处理末尾一个_） - 用
text-overflow: clip配合固定宽高强行截断？不行——它只对溢出有效，不识别字符类型
伪元素不是文本处理器，它的边界很清晰：只管“额外画点什么”，不管“删掉原来那个”。越想用它做内容清洗，越容易绕进死胡同。
