html - 删除::after 选择器中的样式

Question

我在从 ::after 选择器下的一段文本中删除样式时遇到问题，我无法从互联网上找到解决方案。该设计基本上是向左侧的线性渐变。

.txt {
    background: -webkit-linear-gradient(left, #E27822,#E2224C);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: bold ;
}
.txt::after {
   content: " - More Sample Text";
   background: none;
   -webkit-background-clip: none !important;
   -webkit-text-fill-color: none !important;
   color: green;
}

<span class="txt">Sample Text</span>
<p>The "<b>More Sample Text</b>" should be coloured <span style="color: green;"><b>Green</b></span>.</p>

Answer 1

-webkit-text-fill-color只接受颜色，none 不是合适的颜色。

您似乎想重置为初始值，即 currentColor .

.txt {
  background: -webkit-linear-gradient(left, #E27822, #E2224C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
.txt::after {
  content: " - More Sample Text";
  color: green;
  -webkit-text-fill-color: currentColor;
}

<span class="txt">Sample Text</span>
<p>The "<b>More Sample Text</b>" should be coloured <span style="color: green;"><b>Green</b></span>.</p>

可能由于抗锯齿的缘故，文本周围可能仍会出现旧背景的一些小痕迹。为防止出现这种情况，您可以添加白色背景。

.txt {
  background: -webkit-linear-gradient(left, #E27822, #E2224C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
.txt::after {
  content: " - More Sample Text";
  -webkit-text-fill-color: green;
  background: #ffffff;
}

<span class="txt">Sample Text</span>
<p>The "<b>More Sample Text</b>" should be coloured <span style="color: green;"><b>Green</b></span>.</p>