3

Basically I have a span which is inside a p, on CSSI have the p underline, but I can't seem to remove the underline from the span, you'll find some code example below:

p{text-decoration:underline;} span{text-decoration:none;}
<p>Hello World <span> I'm spanning... </span> </p>

All the text is underlined. Could you please give me a hand?

Dayan
  • 7,226
  • 11
  • 43
  • 73
Saul Solis
  • 75
  • 1
  • 4

3 Answers3

5

Use display: inline-block; on <span>. Have a look at the snippet below:

p {
  text-decoration: underline;
}

span {
  text-decoration: none;
  display: inline-block;
}

body {margin: 20px;}
<p> This is just <span> a sample text </span> that will demostrate my issue </p>
Saurav Rastogi
  • 9,309
  • 3
  • 26
  • 37
0

You're looking at this backwards. Since the p element has an underline, the entire thing will. What you need to do is inverse your markup to give the span an underline where you want it. Something like this:

span {
 text-decoration:underline;
} 
<p>
 <span>This is just </span>a sample text<span> that will demonstrate my issue</span>
</p>
Dryden Long
  • 9,756
  • 2
  • 31
  • 45
0

Do it the other way around, wrap the text content you want underlined in spans and style these: 

<p> <span>This is just</span> a sample text <span>that will demostrate my issue</span> </p>

https://plnkr.co/edit/BQyJU0dPzmZaAVEMrKkL?p=preview

LGLab
  • 56
  • 1
  • 4