How to underline text in a h2 but not other elements

Issue

I have an HTML block similar to the following:

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

NOTE: I didn't write the HTML, so I can't change that, all I can do is add some CSS.

I want to underline the text "header text", but not the 1.1.

Using CSS, if I do

h2 {text-decoration: underline;}

The entire line is underlined, and since I can't override the text-decoration below h2, I am at a loss as to how to handle this.

(Here is the code of this issue

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

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

Solution

You could do something like this. The numbers are still technically underlined but if its on a white background you can make their underline match the background to appear as though it isn't underlined

h2 {
  text-decoration: underline;
}

.numbers {
  text-decoration: underline;
  text-decoration-color: white;
}

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

Answered By - JDawwgy