如何移除锚点链接内高亮文本的默认下划线？

问题核心是：<a>标签的下划线属于父元素样式，内部<span>单独设置text-decoration: none无法覆盖该下划线。最简修复方式是通过调整高亮元素的显示模式，脱离父元素下划线的影响：

修改后的CSS代码 #

.highlight{
  font-family: sans-serif;
  text-decoration: none;
  background-color: black;
  color:white;
  padding: 0px 4px;
  display: inline-block; /* 关键：让高亮块成为独立行内块，避开父链接的下划线 */
}

a:hover{
  color: red;
}

/* 可选优化：hover时保持高亮文本的白色，避免被a的hover红色覆盖 */
a:hover .highlight {
  color: white;
}

HTML代码无需修改 #

<h1>
  <a href="/all-products-dummy-link/">View <span class="highlight">everything</span>.</a>
</h1>

原理：display: inline-block让<span>成为独立的行内块元素，父元素<a>的下划线不会延伸到这个独立块上，同时完全保留你需要的高亮样式和默认锚点的其他特性。

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