縦線区切りモジュールデモ

flex + gap

記述が冗長
スタイルの記述量は一番簡潔

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="p-pipe_flex-gap">
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
<span class="pipe"></span>
<a class="c-link" href="#">テキスト</a>
</div>

border

縦棒の高さを変化させる際は、line-heightを変える必要がある
スタイルの記述量としては簡潔

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="p-pipe_border">
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
</div>

::after

一番バランスは良さそう

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="p-pipe_before">
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
<a class="c-link" href="#">テキスト</a>
</div>

gapの装飾について

将来的には、gapの装飾ができるようになるらしい。

https://developer.chrome.com/blog/gap-decorations?hl=ja

その他

box-shadowを利用した縦線の実装方法もある。

https://codepen.io/tak-dcxi/pen/dPGJmPP