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