擬似要素を使って、各要素に下線を配置したいです

Question

::afterを使用して<p>の下に下線を配置したいのですが、うまくできません。

HTML⬇︎
<div class="footer-category-box">
       <div class="footer-category">カテゴリー</div>
       <p>サンプル投稿</p>
       <p>投稿フォーマット</p>
       <p>普通の投稿</p>
</div>

CSS⬇︎
 .footer-category-box{
position:relative;
}

 .footer-category-box p::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background-color: #000;
}

コード
```この時点だと３本の線が各文字の上に表示されるのですが、top:100%もしくはbottom:-7pxと入れると、３本の線が１箇所に被ります。

Answer 1

position: relative; は疑似要素の親に設定しないとダメでしょう。

.footer-category-box p{
  position: relative;
}

Comments

[ct_8725_yuiqui]

ご回答ありがとうございます。

すみません、入力ミスです。

親要素にしっかりと{position:relative}はあります。

回答に「.footer-category-box p{
position: relative;
}」とありましたが、「p」まで入れないといけないでしょうか？

[hatena19]

はい。
.footer-category-box p::after の親要素は、.footer-category-box p です。

[ct_8725_yuiqui]

できました。

この場合擬似要素だから、{p}も親要素に含むのですかね＿＿。

ありがとうございました。