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。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: