要素間の縦線をどう実装するか

こんにちは！ファンタラクティブのまゆです。

弊社のエンジニアチームではMob.*という取り組みを行なっています。そこで以前、二つの要素の間にある縦線はどう実装しますか？と聞いたところいくつかコメントいただいたのでまとめてみました。

要素と要素の間の縦線はどう実装したらいいだろう🤔

擬似要素で線を入れる

一つ目のboxに対しての擬似要素で縦線を実現させています。
私は最初この実装にしてました。が、縦線を追加するだけにしては記述量が多く、コードの視認性もあまり良くないなと感じました。

<div class="flex gap-x-8">
  <div class="relative size-16 bg-red-400 after:absolute after:-right-4 after:bottom-0 after:top-0 after:w-px after:bg-black after:content-['']">box1</div>
  <div class="size-16 bg-green-400">box2</div>
</div>

幅1pxの要素を入れ線に見せる

boxの間に幅が1pxで黒背景の要素を入れ実現させています。
この方法というメンバーが一番多かったです。擬似要素を使うより遥かに分かりやすいコードですね。

<div class="flex flex-wrap gap-x-4">
  <div class="size-16 bg-red-400">box1</div>
  <span class="w-[1px] bg-black"></span>
  <div class="size-16 bg-green-400">box2</div>
</div>

divideを指定する

tailwindのdivideを使うやり方です。あくまでも子要素にborderをつける方法なので今回はboxの親にdivを追加しています。
線の要素を考えなくていいのですっきりとした印象です。

<div class="flex divide-x divide-black">
  <div class="pr-4">
    <div class="size-16 bg-red-400">box1</div>
  </div>
  <div class="pl-4">
    <div class="size-16 bg-green-400">box2</div>
  </div>
</div>

https://tailwindcss.com/docs/divide-width

おわりに

縦線だけを実装するにはどうすればいいのだろうと思いエンジニアメンバーに聞いてみましたが様々なやり方があるんだなと思いました！特にdivideを使ったやり方は思いつかなかったので勉強になりました。

また横線は<hr>タグを使うことで実現できますが、あくまでも内容に区切りをつけたい時に使用することが望ましいようです^[1]。なので今回のような装飾目的の場合は横線でも上記3つのようなやり方が相応しいですね。

今回のコードはtailwind playにまとめてあります！
https://play.tailwindcss.com/za33p6unnO

脚注

1. hrタグ