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

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

1行追加するだけ!CSSで文字に蛍光ペン風のアンダーラインを引く方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

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行追加するだけなので、簡単に実装できますね。強調したい文字にぜひ適用してみてください。

参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。