【CSS】横並びメニューの区切り線を「隣接セレクタ」と「疑似要素」を使って実装する方法

グローバルメニューやフッタメニューで利用することの多い区切り線（罫線）。皆さんはどのように実装していますか。

CSSの[border]を使えば簡単に作ることができますが、縦線の長さや位置を自由変えれないので思ったようにデザインできません。そんな時は「隣接セレクタ」と「疑似要素」を使うとスマートに実装できます。

横並びメニューの区切り線をCSSで実装

隣接セレクタは、要素と要素が直接隣接している場合に適用されるセレクタです。この場合は、隣り合っている[li]要素を指定します。

<ul class="navbar-nav">
    <li><a href="index.html">ホーム</a></li>
    <li><a href="company.html">会社情報</a></li>
    <li><a href="products.html">製品情報</a></li>
    <li><a href="recruit.html">採用情報</a></li>
    <li><a href="contact.html">問い合わせ</a></li>
</ul>

.navbar-nav {
    display: flex;
    list-style: none;
    position: relative;
}
.navbar-nav li+li:before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    height: 14px;
    margin-top: -7px;
    border-right: 1px solid #585858;
}
.navbar-nav a{
    padding: 10px;
}

区切り線の位置は[position:absolute;]で絶対配置します。縦方向に50%した後、区切り線の半分の高さ分、marginで上方向に表示させることで垂直方向に中央寄せしています。