html - CSS 应用样式除了 :after

Question

来自以下 CSS 代码:

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

使用 HTML:

<p>abcd</p>

我希望得到以下结果:
abcd 文本

但是我明白了:
abcd 文本

这是为什么，我怎样才能达到我想要的效果？

Answer 1

只需添加display: inline-block;

p {
  text-decoration: line-through;
}

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

<p>abcd</p>