如何用CSS去除::after伪元素上的文本下划线？

嗨，我之前也踩过这个坑！问题的根源在于：a标签的text-decoration不是普通的继承属性——它的下划线会直接覆盖整个元素的所有内容，包括你用::after生成的伪元素。所以你直接给伪元素加text-decoration: none !important;才会毫无效果，因为父元素的装饰样式是“贯穿”整个a标签的，不是靠继承传递的。

给你两个不用改HTML结构的实用解决办法：

方法一：将伪元素设置为inline-block（推荐） #

这是最稳妥的方案，把伪元素变成一个独立的小“块级容器”，这样父元素的下划线就不会延伸到它上面了。调整后的CSS如下：

/* 明确给链接文本添加下划线 */
a {
  text-decoration: underline;
}

a:not(:last-of-type)::after {
  content: '⬩';
  color: var(--text);
  margin: 0 .25rem;
  /* 关键属性：让伪元素脱离父元素的文本装饰范围 */
  display: inline-block;
  text-decoration: none;
}

方法二：用透明下划线应急（不推荐） #

如果暂时不想改动display属性，也可以给伪元素设置透明的下划线颜色。不过这个方法属于“曲线救国”，在一些旧浏览器可能有兼容性问题，仅作应急使用：

a:not(:last-of-type)::after {
  content: '⬩';
  color: var(--text);
  margin: 0 .25rem;
  text-decoration-color: transparent;
}

我自己实际开发里常用第一种方法，逻辑清晰还兼容各种主流浏览器，亲测有效哦！

内容来源于stack exchange