1行追加するだけ！CSSで文字に蛍光ペン風のアンダーラインを引く方法

CSSを使って、文字に蛍光ペン風のアンダーラインを引く方法をご紹介いたします。紹介するコードをコピペすると、以下のようなアンダーラインをつけることができます。

蛍光ペン風のアンダーライン

CSSで文字に蛍光ペン風のアンダーラインを引く方法

蛍光ペン風のアンダーラインを引きたい要素に対して、backgroundプロパティでアンダーラインを実装します。今回はstrongタグにCSSを追加してみます。


strong {
 background: linear-gradient(transparent 50%, #ffff66 50%);
}

transparentのパーセンテージを変更すれば、線の太さが変わります。「#ffff66」の部分で線の色を指定し、その後ろのパーセンテージで透過度を指定します。

線の位置を微調整したい時は、background-positionを使えば良いので、以下のように指定します。


strong {
 background: linear-gradient(transparent 50%, #ffff66 50%) 0 10px;
}

背景色の後ろに「0 10px」を追加していますが、0は横の位置、10pxは縦の位置です。上記の場合、線の位置が本来の場所よりも10px下にずれます。この部分の値を変更することで、線の位置を調整できます。

1行追加するだけなので、簡単に実装できますね。強調したい文字にぜひ適用してみてください。

参考になれば幸いです。