ボーダーとか引くの簡単じゃね？

そう思っていた時代が私にもありました。

.hoge {
  border-bottom: 2px solid black;
}

はい、終わりー。

じゃないんですよね。
よくみると、親要素(.hogeクラス)の要素の外側にボーダーがついて、
全体の高さが2pxズレてしまうんですよね。

親要素をhoverした時に、ボーダーが出る仕様で！とか、普通によくある話なわけで、
親要素の高さを維持したまま下線を要素の中に入れる必要がある訳です。

前置き長くなりましたが、意外とハマったので対処方法を備忘録としてメモしておきます。

どうする？

アプローチは以下の通り。

::afterの擬似要素を乗せる
box-shadowを使う
border-bottomを使う

::afterのパターン

.parent {
  position: relative; /* 擬似要素の位置を調整するために相対位置を設定 */
}

.child {
  position: relative; /* 子要素に下線を引く */

  &::after {
  content: ""; /* 擬似要素に空のコンテンツを追加 */
  position: absolute; /* 絶対配置 */
  bottom: 0; /* 親要素の底部に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 親要素の幅に合わせる */
  height: 2px; /* 下線の高さ */
  background-color: black; /* 下線の色 */
  }
}

box-shadowのパターン

.child {
  box-shadow: inset 0 -2px 0 0 black;
}

border-bottomのパターン

.parent {
  display: flex; /* 必要に応じて */
}

.child {
  flex-grow: 1; /* 子要素が親要素の残りのスペースを埋める */
  border-bottom: 2px solid black; /* 子要素の下に下線を引く */
}

書き方色々ですね💡

擬似要素が使いこなせると、柔軟に色々なスタイルを当てられる様になるので使いこなしたいですが…記述量はやっぱり増えますね💦

一番意外だったのは、box-shadowでもボーダーの代わりに使うことができるという点です。
box-shadowは要素の外側に影をつけるプロパティなのですが、親要素の中に線を描くのにも使えるという…。
insetなんて知らなかった…。

一番直感的な、border-bottomでも書くことができるのですが、なぜか上手くいかない…みたいな時、違う記述方法も試せる様になると、悩んで手の止まる時間が短くなるかもしれません。