button元素中text-decoration样式异常：部分文本无法取消下划线

问题核心在于 text-decoration 样式的特殊表现：父元素设置的下划线是绘制在自身文本容器层面，并非通过样式继承传递给子元素，因此子元素设置 text-decoration: none 无法直接覆盖父元素的下划线效果。

最优实现方案 #

反转样式逻辑，不给按钮整体设置下划线，仅给需要带下划线的文本单独添加样式：

CSS 代码

.button-text-underline {
  text-decoration: underline;
}

HTML 代码

<button>
  <span class="button-text-underline">Text with underline</span>
  <span>Text with no underline</span>
</button>

备选方案（需保留父元素样式时） #

如果因需求必须给按钮设置全局下划线，可通过将子元素设为 inline-block 形成独立文本容器，从而让 text-decoration: none 生效：

CSS 代码

.button-underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
  display: inline-block;
}

HTML 代码

<button class="button-underline">
  Text with underline
  <span class="no-underline">Text with no underline</span>
</button>

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