😋

「CSSで蛍光ペンっぽいアンダーライン」はtext-decorationで実現できる

2022/09/26に公開

蛍光ペン風のハイライト

2022年現在、CSSでテキストに蛍光ペン風の下線を引く方法をググるとだいたいlinear-gradientを使った記事がヒットします。しかし、いまどきはlinear-gradientを使わなくてもtext-decorationで同じような表現ができるので紹介しておきます。

結論: こういうCSSをあてる

/* セレクタ名はてきとう */
.highlight {
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

デモはこちら

ポイントはtext-decoration-skip-ink: noneです。これを指定しないとテキストと重なる部分の線が途切れてしまい、蛍光ペンっぽさがなくなってしまいます。

以前はSafariがtext-decoration-skip-inkに対応していないことがネックだったのですが、Safariが15.4〜対応したことで、晴れてすべての主要ブラウザで使えるようになりました（caniuse）。

良いところ

linear-gradientを使うより直感的に線の位置、太さ、色を指定することができます。また、linear-gradientを使った場合には線の位置をテキストの行の領域より下に配置するのが難しかったのですが、text-decorationを使った方法であればそのような制約もありません。

こちらの記事も合わせてどうぞ。

結論: こういうCSSをあてる

良いところ

Discussion