::beforeや::afterについて、疑似要素が生成される場所に関する私の認識が合っているか確認したいです。

Question

以下のようなコードがあるとします。

<div class="box">
    <p>text</p>
</div>

このときに「.box::before」というCSSを書けば「divの開始タグの直後にbefore疑似要素が生成」され、「.box::after」というCSSを書けば「divの終了タグの直前にafter疑似要素が生成される」という認識で合っていますか？

Answer 1

おっしゃるとおりですが補足で、.box::before{}と書いただけでは生成されません。
中身を書いて初めて生成されます。それを以下の通り記述します。

.box {
  content: "";
}

このcontentを書かないと何も起こりません！
いくらbackground-colorやwidthやら指定しようが何も起こりません。
content（中身）を書いて初めて生成されます。

また、content: "ああああ"とかけば、その疑似要素に「ああああ」という文字がかかれます。
文字以外にもいろいろできますが何もいらない場合はcontent: ""としてクオテーションの中身を空にします。

Comments

[sino3325]

回答ありがとうございます。
おかげさまでスッキリしました。