Удалить стиль в :: после селектора

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>