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?
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>
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>
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>
