※ 本記事はDMM WEBCAMP mentor Advent Calendar 2022 11日目のエントリーです。

CSSでテキストに下線を引く方法として、text-decorationを使ったものが有名です。

<p class="sample-text">テキスト</p>

p.sample-text {
  text-decoration: underline;
}

こう書くと

See the Pen Untitled by takumi (@takumi3488) on CodePen.

こう表示されます。
色や形状もある程度アレンジが可能です。

p.sample-text {
  text-decoration: underline dotted #FF3490;
}

See the Pen Untitled by takumi (@takumi3488) on CodePen.

このように、点線にしたり色を変えたりできます。
しかし、線を太くしたい場合にはどうすればよいでしょうか。
例えばマーカー風の線を引きたいときなどです。

パッと思いつくのは、border-bottomを使った方法です。

p.sample-text {
  border-bottom: solid 5px yellow;
}

実はこれだと線がながーく伸びてしまいます。

See the Pen Untitled by takumi (@takumi3488) on CodePen.

実はpタグのようなinlineの要素はデフォルトで横に伸びきってしまっています。
これを回避するために、inlineじゃなくしてやりましょう。

p.sample-text {
  border-bottom: solid 5px yellow;
  display: inline-block;
}

これでうまくいきます。

See the Pen Untitled by takumi (@takumi3488) on CodePen.