Search code examples
htmlcssstylesline-through

CSS apply style except on :after

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?

Solution

  • Simply add display: inline-block;

    p {
  text-decoration: line-through;
}

p:after {
  content: " text";
  text-decoration: none;
  display: inline-block;
}
    <p>abcd</p>