CSS3

：

疑似要素

：

::before

　 編集：2022.07.13 by T.A.

[Edge]○。→●、mdn

要素内容の最初の位置。

E::before
E 該当させる要素。

content の算出値が none でないときには、これらの疑似要素は、その出自の要素の直の子であったかのように†、［content に指定された内容を伴うボックス］を生成する。【†したがって、出自の要素に指定された継承プロパティも継承することになる。】

出自の要素の実際の内容の［直前（::before）／直後（::after）］にあって、ボックス ツリーにおいて要素の子になるような、スタイル可能な疑似要素を表現する。

これらの疑似要素は、通常の DOM 要素と まったく同じ様にスタイルできる。通常の要素に適用されるプロパティは、すべて［::before／::after］にも同様に適用される

例えば、次の規則は、class 属性値が note を含んでいる 各 P 要素ごとに、その内容の前に文字列 "注記：" を挿入する： 
p.note::before { content: "注記：" }

display の初期値は inline なので、これは行内ボックスを生成することになる。P の他の行内ボックスである子と同様に、それは P の行内整形文脈に関与し、他の内容と行を共有し得ることになる。

定例の要素の内容と同じく、［::before／::after］疑似要素を成す生成内容は、その出自の要素に適用されている［::first-line や ::first-letter］疑似要素があれば，それらの一部を形成し得る。

以下のCSSが組み込んであります： 

<SPAN class=Test>テスト</SPAN><BR>
<INPUT class=Test><BR>

テスト
別画面に表示させて。
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：