【CSS】::before（擬似要素） - 最初の子要素

CSSの擬似要素/beforeについて解説します。

検証環境

CSS

macOS

14.1

before

擬似要素/beforeは“最初の擬似的な子要素を表す擬似要素”です。

::before {
    content: 値;
    プロパティ名: プロパティ値;
}

通常、擬似要素/beforeはcontentプロパティを合わせて使用します。

contentプロパティは文字や画像などのコンテンツ（値）を指定します。

『p要素内の最初の擬似的な子要素』を指定するセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
p::before {
___ih_hl_end
    content: "CSS : ";
    font-weight: bold;
}
</style>

<p>Cascading Style Sheets</p>

プレビュー

contentプロパティを設定することで、その値が擬似的な要素として生成されます。