How to have a part of the decorated text - NOT decorated?

Question

How can I make the span inside the decorated paragraph, not decorated?

CSS

p {
    text-decoration: underline;
}

span {
    text-decoration: none;
    /* text-decoration: line-through; */
}

Further away I'd like to put a line through the undecorated span.
I have a feeling like this should be very easy to do, hence I couldn't find a solution online, or it might just not be logical to do, at all.

Answer 1

Unfortunately this is not possible using the approach you suggest, it may be possible if you could style the text nodes inside the paragraph, but CSS doesn't have a selector for text nodes.

You can certainly achieve the desired result, but it will require styling sibling elements rather than a parent element. For instance you could wrap the other text inside <span> elements and style those instead.

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

<p>
  <span class="underline">Is</span>
  <span class="line-through">this</span>
  <span class="underline">what you want to do?</span>
</p>