E::before

擬似要素について

E 要素の前に育成された内容に対してスタイルが適用されます。

example

h3 { counter-increment: chapno; }
h3::before { content: counter(chapno, upper-roman) ". "; }

source

<h3>見出し</h3>
 <p>文章文章文章文章文章文章</p>
<h3>見出し</h3>
 <p>文章文章文章文章文章文章</p>
<h3>見出し</h3>
 <p>文章文章文章文章文章文章</p>

display

::before や ::after で生成された内容を持つ要素に ::first-letter 擬似要素 と ::first-line 擬似要素が適用されると、 それらは生成された内容を含む要素の最初の文字または最初の行に適用されることになります。

example

p::before { content: "★"; }
p::first-letter { color: deeppink; }

source

<p> 注意事項 </p>

display

" 注意事項 " の前に " ★ " が表示され、その色が ::first-letter で指定した deeppink になりました。

※ E の斜体は仮の名前です。