擬似要素の使い方を教えてください。

Question

「企業情報」や「ニュース」などの日本語の部分と「|」を擬似要素を用いて表示したいのですが、具体的にどのようなコードを書いたらいいのでしょうか？

Comments

[hatena19]

現状のHTMLとCSSコードを提示してください。

[m.ts10806]

調べて何も出てきませんか？

[Lhankor_Mhy]

「具体的にどのようなコードを書いたらいいのでしょうか？」とのことですが、具体的な問題がないと具体的なコードは出しようがないです。

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

Answer 1

<ul class="menu">
  <li>
    <a href="#">ABOUT<span>企業情報</span></a>
  </li>
  <li>
    <a href="#">NEWS<span>ニュース</span></a>
  </li>
  <li>
    <a href="#">SERVICE & PRODUCT<span>サービス&製品情報</span></a>
  </li>
  <li>
    <a href="#">CONTACT<span>お問い合わせ</span></a>
  </li>
</ul>

.menu {
  list-style: none;
  display: flex;
}
.menu > li {
  padding: 10px 30px;
  position: relative;
}

.menu > li + li::before {
  content: "";
  position: absolute;
  top: 25%;
  left: 0;
  width: 2px;
  height: 50%;
  background-color: black;
}
.menu > li > a {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 1.5rem;
}
.menu > li > a > span {
  font-size: 1rem;
}

Comments

[momo429]

分かりやすい回答ありがとうございました。

Answer 2

<style>
#menu{
list-style:none;
display:flex;
}
#menu li{
width:20%;
text-align:center;
}
#menu li:not(:first-child)::before{
position:absolute;
top:20px;
display:block;
content:"|";
}
#menu li::after{
display:block;
content:attr(data-japanese);
opacity:0.5;
font-size:0.7em;
}
</style>

<ul id="menu">
<li data-japanese="企業情報">About</li>
<li data-japanese="ニュース">NEWS</li>
<li data-japanese="サービス＆製品情報">SERVICE&amp;PRODUCT</li>
<li data-japanese="お問い合わせ">CONTACT</li>
</ul>

Answer 3

「企業情報」や「ニュース」などの日本語の部分と「|」を擬似要素を用いて表示したい

たとえば、以下のようなHTMLであれば、以下のようなスタイルでいいかと思います。

<div><a href="#">About</a></div>

a::after{
  content: "企業情報";
}
div::after{
  content: "|";
}

::beforeも併せて使えば、divのようなラッパーはいらないでしょうが、その後のスタイル付けが大変そうです。