:before疑似クラス

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

解説

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

構文

構文は以下になります。

サンプル

要素の先頭に"♥"を表示する

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

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

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

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

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

備考

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

関連項目

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

Tweet