CSS 应用除 :after 之外的样式

Question

来自以下CSS代码：

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

与 HTML:

<p>abcd</p>

我希望得到以下结果：
~~abcd~~ 文字

但是我明白了：
~~abcd 文字~~

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

Answer 1

您需要 select 然后申请 text-decoration: none。即：

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

Answer 2

只需添加display: inline-block;

p {
  text-decoration: line-through;
}

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

<p>abcd</p>

CSS apply style except on :after