0

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>
Dharman
  • 30,962
  • 25
  • 85
  • 135
Dan Strohl
  • 23
  • 6
  • Unfortunately I don't think that's something you can't achieve with CSS alone. "Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration" [source](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) – Terry Sep 29 '22 at 22:01
  • @Terry not all the descendants. Some of them can stop the underline propagation like inline-block elements – Temani Afif Sep 29 '22 at 22:06
  • @TemaniAfif Don't shoot the messenger: just copy pasta from MDN docs. – Terry Sep 29 '22 at 22:14
  • Thanks @JDawwgy, while your solution may not actually work for me since I dont for sure know the color of any given background where it lives, it is a pretty slick answer. I'm going to mark your answer as the solution. The answer by Deepak-Kamat is valid as well and might actually be preferred in some situations, but I think changing the color of the underline is slightly less potentially impactful than changing the background and padding of the span. (though as I said, there are cases where that might be the better solution). – Dan Strohl Sep 30 '22 at 15:03
  • you are not obliged to mark any solution as accepted if they don't work for you. By the way, check the duplicate to get a solution where you don't need to set any color and it works with any background – Temani Afif Oct 01 '22 at 08:01

2 Answers2

1

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>
JDawwgy
  • 888
  • 2
  • 18
  • 1
    wow! I thought this was not even possible to achieve with `text-decoration`.. this is brilliant, never explored this `text-decoration-color` property haha! – Deepak Kamat Sep 29 '22 at 22:05
  • not bad at all, but `h2 span {...` should be enough, no ? – Mister Jojo Sep 29 '22 at 22:10
  • Nice trick, but this also means it will only work against a solid color background... and you need to know the background color which this text is being rendered on top of :) but if OP is using a solid color background of known color, this is quite a smart way. – Terry Sep 29 '22 at 22:10
  • @Terry if the OP knows the HTML isn't changing ever, for whatever reason, I would like to believe its surrounding isn't going to change that often either., that's definitely a trade-off that has to be done. – Deepak Kamat Sep 29 '22 at 22:12
  • @MisterJojo your correct, I could have used the `h2 span` I updated it to just be the class name `.numbers` used as the selector. @Terry Yes this is a bit of a workaround solution that will only work on a solid color background – JDawwgy Sep 29 '22 at 22:12
  • Sadly, I don't for sure know that the HTML is never changing, so I know whatever I do will induce potential problems in the future if something does change... but it's what I have to work with. :( – Dan Strohl Sep 30 '22 at 15:06
-1

That's not possible to do with text-decoration (UPDATE: It is possible to achieve this with just text-decoration), if you are aiming to just have an underline, which can be achieved by using border-bottom then you can do something like this

h2 {
  border-bottom:2px solid; 
  display: inline-block;
}
span {
  display: inline; 
  background-color: #fff; 
  padding: 3px 0;
}

Example: https://jsfiddle.net/DeepakKamat/eqjsg0nL/

Use background color on the span and give it a vertical padding to hide the border on its parent element.

Deepak Kamat
  • 1,880
  • 4
  • 23
  • 38
  • Thanks, I did think of this, but was hoping for something more... elegant? it feels like this shouldn't be this hard and I was hoping that I was simply missing something. for all of my own html I've learned long ago to put everything that I might someday want to format into it's own element with a usefull class/id so I can call it out later. – Dan Strohl Sep 29 '22 at 22:06