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

CSSの擬似要素の１つ、afterについてご紹介します。

after

擬似要素afterは最後の子要素です。

基本構文

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

contentプロパティを合わせて使用します。
値に文字や画像などを指定し、コンテンツを追加することができます。

サンプル

次のコードは擬似要素beforeでp要素の最後に子要素を定義します。

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

<p>Cascading Style Sheets</p>