:after疑似クラス

:afterは、要素の直後にコンテンツを挿入する疑似クラスです。

解説

指定した要素の直後にコンテンツを挿入します。
共通的に挿入したいテキストなどを指定することができます。

構文

構文は以下になります。

サンプル

要素の末尾に"♥"を表示する

p.sample01:after{
  content:"♥";
}

<p class="sample01">こんにちは</p>

要素をカッコで囲って表示する

p.sample02:before{
  content:"「";
}
p.sample02:after{
  content:"」";
}

<p class="sample02">Hello World!</p>

備考

• 要素の直前に挿入したい場合は、:before疑似クラス を使用します。

関連項目

• :before：要素の直前にコンテンツを挿入する
• :after：要素の直後にコンテンツを挿入する

Tweet