《CSS》グラデーションのラインをテキストに引く
公開日:2023年09月29日 最終更新日:2024年2月27日
グラデーションのラインをテキストに追加します。
複数行の場合も折り返して表示します。
DEMO
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
HTML
<div class="copy">
この文章はダミーです。<span class="copy-highlight">文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</span>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</div>
CSS
.copy-highlight {
background: linear-gradient(90deg, rgba(207,87,71,1) 0%, rgba(207,87,71,.4), rgba(207,87,71,1) 100%) center bottom / auto 4px repeat-x;
}