Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
その他 Widely available

::before and ::after

content プロパティと組み合わせて、HTML を変更せずに装飾的なコンテンツを追加できるCSSの強力な機能です。アイコンの追加、装飾線、引用符、カウンターなど多様な用途があります。CSSアートやレイアウトのハックにも広く利用されており、モダンなWebデザインで最も頻繁に使用される擬似要素です。

擬似要素生成コンテンツ

概要

content プロパティと組み合わせて、HTML を変更せずに装飾的なコンテンツを追加できるCSSの強力な機能です。アイコンの追加、装飾線、引用符、カウンターなど多様な用途があります。CSSアートやレイアウトのハックにも広く利用されており、モダンなWebデザインで最も頻繁に使用される擬似要素です。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 4+
Firefox 1.5+

モバイル

Chrome Android 18+
Safari iOS 3.2+
Firefox Android 4+

基本構文

CSS 
.required-field::after {
  content: ' *';
  color: red;
}
.quote::before {
  content: '\201C';
  font-size: 2em;
}

実務での使いどころ

  • 必須フィールドのマーク付け

    フォームラベルの後に::afterで赤いアスタリスクを自動追加し、必須項目を視覚的に示すことができます。

注意点

  • 擬似要素はDOMに存在しないため、JavaScriptで直接操作できません。また、content プロパティが設定されていないと擬似要素は生成されません。

アクセシビリティ

  • 擬似要素で挿入されたテキストはスクリーンリーダーに読み上げられる場合があります。装飾目的の場合は content: '' とし、重要な情報はHTML内に配置してください。

参考リンク