CSS应用样式除了：after

Question

从以下CSS代码：

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

使用HTML：

<p>abcd</p>

我希望以下内容：
abcd text

但是我得到了这个：
abcd text

为什么会这样，我怎样才能得到我想要达到的目标？

Answer 1

只需添加display: inline-block;

即可

p {
  text-decoration: line-through;
}

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

<p>abcd</p>

Answer 2

您需要选择之后再应用text-decoration: none。即：

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