《CSS》斜めボーダーのラインをテキストに引く
公開日:2023年09月23日 最終更新日:2024年12月6日
Ad
斜めボーダーのラインをテキストに追加します。
複数行の場合も折り返して表示します。
DEMO
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
HTML
<div class="copy">
この文章はダミーです。<span class="copy-highlight">文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</span>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</div>
CSS
pxを変更するとマーカーの幅や色が変わります。
.copy-highlight {
background: repeating-linear-gradient(-45deg, rgba(207,87,71,.4), rgba(207,87,71,.4) 4px, #fff 4px, #fff 6px) center bottom / auto 4px repeat-x;
}