擬似要素::afterの使い方について

Question

上の画像のように | をナビゲーションメニューの各項目の中間に入れたい（擬似要素::afterを用いることが絶対条件）のですが、うまくいきません。
試したことは、align-items:center;を指定したのですが、適用できませんでした。
わかる方おりましたら、ご教授願います。
![

<div class="header">
      <ul>
        <li class="imgbox"><img src="img/header.png" /></li>
        <li class="after">ABOUT<br />企業情報</li>
        <li class="after">NEWS<br />ニュース</li>
        <li class="after">SERVICE & PRODUCT<br />サービス＆製品情報</li>
        <li>CONTACT<br />お問い合わせ</li>
      </ul>
    </div>

.after::after {
  content: "|";
  align-items: center;
}

Answer 1

模写元のサイトのコードです。

下記コードより、「|」の上下中央揃えも行える様です。

.header__list::after {
    content: '|';
    height: 8px;
    width: 1px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    background-color: #000;
}

*, *::before, *::after {
    box-sizing: border-box;
}

Comments

[kai0310]

解決できましたでしょうか？

[19941224ngng]

ありがとうございます！
なぜか「|」が出現しません????

[kai0310]

失礼しました。
模写元ではちがう形で表示しているようですね。。

回答を修正しときますので、お手数ですが、再度お試しください。

[19941224ngng]

ありがとうございます！
やはり、うまくいかないです、、
content : ' | ' ;
だけだと表示はされるのですが、、
他のプロパティが入ってくると表示されなくなります????

Answer 2

「align-items:center;」ではなく、paddingで設定してみてください。

.after::after {
  content: "|";
  padding: 0 30px;　/*←好きな数字に*/
}