1

Does anyone know why the span text is still underlined even though I specified not to be so. The color is overwritten on the span child, but not the text-decoration-line?

p {
  width: 300px;
  text-decoration-line: underline;
  color: #333;
}

span {
  text-decoration-line: none;
  color: #F00;
  display: inline-block;
}

#span2 {
  display: inline;
}
<p>Lorem ipsum <span id="span1">THIS IS NOT UNDERLINED and should sit next to "Lorem ipsum", not below it</span> sit amet, consectetur adipiscing elit. Nam imperdiet ante sit amet eros fermentum faucibus</p>

<p>Lorem ipsum <span id="span2">THIS IS NOT UNDERLINED and should sit next to "Lorem ipsum", not below it</span> sit amet, consectetur adipiscing elit. Nam imperdiet ante sit amet eros fermentum faucibus</p>
dreamLo
  • 1,612
  • 12
  • 17
  • I have edited my question. The `inline-block` does indeed add the underline to the span, but if the container has a fixed width, the span will now go under the "Lorem ipsum" text instead of sitting next to it. – dreamLo Aug 18 '21 at 10:08

2 Answers2

3

Try to add display: inline-block to your span. It's underlined because it's a child of the p tag that's underlined. It's the easiest way.

Have fun coding :)

p {
  text-decoration: underline;
  color: #333;
}

span {
  display: inline-block;
  color: #F00;
}
<p>Lorem ipsum <span>THIS SHOULD NOT BE UNDERLINED</span> sit amet, consectetur adipiscing elit. Nam imperdiet ante sit amet eros fermentum faucibus</p>
MeDead
  • 197
  • 2
  • 9
  • Thanks. Although it looks more like a hack. I mean you can use border-bottom with inline, but you can't use underline, unless it's inline-block. Makes no sense to me. – dreamLo Aug 16 '21 at 20:20
0

It's because you have added the underline for p and it goes for the entire sentence. You can add the code like this without the need of the css property.

<u><p>Lorem ipsum</u> <span>THIS SHOULD NOT BE UNDERLINED</span> <u>sit amet, consectetur adipiscing elit. Nam imperdiet ante sit amet eros fermentum faucibus</u></p>
Lakshan Costa
  • 623
  • 7
  • 26
  • I would not recommend this approach. This works poorly for large amounts of repetitive `p`+`span` patterns (adding extra weight to the page when CSS can give you one rule and apply it to all matching cases) – blurfus Aug 16 '21 at 20:13