从选择器的::before和::after中删除css格式

Question

我想使用css来更改某些文本的样式，但不想更改我也想添加的：：before和：：after内容。但我找不到一种方法。如果有什么不同的话，我会用React。

js文件中的文本是

<span className="startMonth">£12</span>

我的css是：

startMonth {
text-decoration: line-through ;
color:red;
}
.startMonth::before {
text-decoration: none !important ;
content: "Special Offer ";
color: red;
}
.startMonth::after {
text-decoration: none !important ;
content: " FREE";
}

即。我只想让12英镑有一行，但结果是所有文本都有一行。无论如何，我都可以在不编辑.js.的情况下做到这一点

谢谢。

Answer 1

您可以使用绝对定位来防止子伪元素继承父元素的text-decoration，如下所示：

.startMonth {
color:red;
position: relative;
text-decoration: line-through;
}
.startMonth::before, .startMonth::after {
position: absolute;
left: 0;
}
.startMonth::before {
top: 100%;
content: "Special Offer ";
}
.startMonth::after {
top: 200%;
content: " FREE";
}

<p class="startMonth">£12</p>

一种更干净的方法是使用一个容器来存放文本：

.startMonth {
text-decoration: line-through;
color:red;
}
.container::before {
content: "Special Offer ";
}
.container::after {
content: " FREE";
}

<div class="container">
<p class="startMonth">£12</p>
</div>

Answer 2

您可以这样做来更改视图，而无需编辑JS 中的任何内容

.startMonth {
color: red;
text-decoration: line-through;
padding-left: 81px;
position: "relative"
}
.startMonth::before {
content: "Special Offer";
color: green;
position: absolute;
left: 0;
}
.startMonth::after {
content: "FREE";
color: green;
position: absolute;
left: 116px;
}

以下是一个JSFiddle示例