text-decorationの下線の位置をtext-underline-offsetで調整する

主にリンクに使われるtext-decorationの下線の位置をtext-underline-offsetを使うことで調整できる。

対応ブラウザは以下の通り。

.text {
  text-decoration: underline;
  text-underline-offset: 1em; /* <length> */
  text-underline-offset: 30%; /* <percentage> */
  text-underline-offset: -10px; /* negative */
}

pxやemなどの<length>や<percentage>の値を指定できる。また、負の値も指定できる。

注意点

• 日本語などで使う場合は、<del>のように見えてしまう。
• マーカー風のunderlineに使う場合は、アルファベットだけ透過しないため線が切れる
  • text-decoration-skip-inkを使うことで途切れることなく引ける

デモ

関連記事

• CSSでマーカー風アンダーラインを引く方法