CSS apply style except on :after

Question

From the following CSS code:

p {text-decoration: line-through;}
p:after {text-decoration: none;
content:" text";}

with HTML:

<p>abcd</p>

I woud expect the following:
abcd text

However I get this:
abcd text

Why is this and how can I get what I wanted to achieve?

Answer 1

Simply add display: inline-block;

p {
  text-decoration: line-through;
}

p:after {
  content: " text";
  text-decoration: none;
  display: inline-block;
}

<p>abcd</p>

Answer 2

You need to select the after then apply text-decoration: none. I.e:

p:after p { text-decoration: none; }