html - 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

您需要选择 after 然后 apply text-decoration: none。IE：

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