如何仅为h2标签内指定文本添加下划线而非全部内容

现有无法修改的HTML结构：

<h2><span class="numbers">1.1 </span>header text</h2>

需求是只给header text添加下划线，<span>包裹的1.1部分不要下划线。

直接给h2设置text-decoration: underline会让整行都出现下划线，而且给子元素span设置text-decoration: none根本没用——因为text-decoration的特性比较特殊：父元素设置后，子元素的行内内容会直接继承这个装饰效果，没法通过子元素的text-decoration: none直接覆盖。

下面是两种可行的解决办法：

方案1：用inline-block阻断装饰传播 #

把<span>设置为inline-block，让它形成独立的排版盒子，父元素的下划线就不会穿透进去，再给它设置text-decoration: none即可：

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

这个方法不依赖页面背景色，兼容性也不错，是比较推荐的方案。

方案2：用背景色覆盖下划线 #

如果不想改变元素的display属性，可以给<span>设置和页面背景色一致的背景色，把它下方的下划线盖住：

h2 {
  text-decoration: underline;
}
h2 .numbers {
  text-decoration: none;
  background-color: #ffffff; /* 替换成你实际的页面背景色 */
  padding-right: 3px; /* 微调一下，避免下划线从边缘露出 */
}

注意：如果页面背景是渐变、图片这类非纯色的，这个方法就不适用了。

错误示例（无法实现需求） #

你之前尝试的这段代码之所以没用，就是因为span是行内元素，父元素的下划线会直接穿过它：

h2   { text-decoration: underline; }
span { text-decoration: none;      }

<h2><span class=numbers>1.2 </span>header text</h2>

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