文字の間にCSSで縦線を入れる

ナビっぽいリンクを横に並べたとき、
文字と文字のあいだに「｜」みたいな縦線を入れたいことがあります。

ただ、テキストとして入れてしまうと HTML がちょっと汚れるし、
デザイン調整もしづらいので、CSSで入れるほうがいい気がして調べてみました。

イメージとしてはこんな感じ

リンク1｜リンク2

HTMLは普通に li を並べるだけ

<ul class="link">
  <li>
    <a href="link1.php">リンク1</a>
  </li>
  <li>
    <a href="link2.php">リンク2</a>
  </li>
</ul>

特別な仕掛けはなく、単純に li を2つ並べただけ。

CSSはこれ。
CSSで「最後の li 以外にだけ」縦線を付けるようにしています。

.link li:not(:last-child)::after {
  content: "｜";
  display: inline-block;
  margin-left: rem(16);
  margin-right: rem(16);
  vertical-align: middle;
  color: currentColor;
}

:not(:last-child) のおかげで、
最後の項目だけ縦線が出ないようにできます。

あとは content に「｜」を入れるだけ。
色も currentColor にしておくと、その場の文字色に合わせてくれる。
シンプルで、HTMLも汚れないので使いやすかったですね。

今回は以上です！