CSS实现链接hover仅文本加下划线 ::before伪元素内容无下划线

::before伪元素设置text-decoration: none不生效，是text-decoration属性本身的绘制规则导致的：当父元素设置了文本下划线，这条线会绘制在父元素的文本装饰层，默认覆盖所有属于普通内联流的子内容（包括伪元素生成的内容），子内联元素单独设置text-decoration: none无法抵消父元素层绘制的下划线，这也是给伪元素设置color等属性可以生效、唯独text-decoration失效的核心原因。
另外原有代码存在一处逻辑偏差：下划线是链接的hover效果，代码却把下划线加在了外层.fontIcon容器上，会导致hover到容器空白区域也会触发下划线，不符合链接交互的预期。

给::before伪元素添加display: inline-block属性即可：该属性会让伪元素生成独立的内联块格式化上下文，父元素的文本下划线不会穿透绘制到独立盒的内容上，同时将下划线的绑定对象修正到a标签本身。
修正后的完整代码如下：

a {
  text-decoration: none;
}

.fontIcon {
  font-family: 'Arial', bold;
}

/* 下划线绑定到链接hover状态，而非外层容器 */
.fontIcon a:hover {
  text-decoration: underline;
}

.fontIcon a::before {
  content: "- ";
  display: inline-block; /* 核心属性，隔离父元素的下划线效果 */
  text-decoration: none;
}

原有HTML结构无需调整，即可正常实现预期效果：hover链接时只有正文文本显示下划线，前缀的- 不会出现下划线。
该方案兼容性覆盖所有支持CSS2.1的浏览器，无需额外嵌套HTML标签。

内容的提问来源于stack exchange，提问作者Zaphod Beeblebrox