【CSS】::after（擬似要素） - 最後の子要素

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

検証環境

CSS

macOS

14.1

after

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

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

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

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

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

sample.html

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

<p>Cascading Style Sheets</p>

プレビュー

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