メニューの間の区切り線を実装する方法

今回はヘッダーのメニュー部分によくある区切り線の実装方法を解説します。

まずは実装例です。

See the Pen Untitled by Makoto Kokubo (@Kokumako) on CodePen.

  &__item {
    border-left: 1px solid #000;
    &:last-child{
    border-right: 1px solid #000;
    }
  }

この部分が区切り線を実装しているコードです。

  border-left: 1px solid #000;

↑でメニュー項目の左側に縦線をつくります。ただ、これだけだとメニューの右橋には縦線がつきません。なので

    &:last-child{
    border-right: 1px solid #000;
    }

こうする事によって、最後の要素にだけ右側に縦線が現れる様になります。

今回のコードはシンプルに実装する場合です。
borderで実装していますので、線の長さを調整したい場合は上下のpaddingの値を変化させる必要があります。

線をナナメにしたり、別の形のものにしたい場合は疑似要素で実装する必要があります。

今回は以上です。