::before and ::after
CSS において ::after は、選択した要素の最後の子要素として擬似要素を生成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 4 | 18 | 3.2 | |
animation and transition support アニメーションとトランジションのサポート | 26 | 12 | 4 | 7 | 26 | 7 |
| その他 | ||||||
| `::前` | 1 | 12 | 1.5 | 4 | 18 | 3 |
| CSS セレクタ | ||||||
animation and transition support アニメーションとトランジションのサポート | 26 | 12 | 4 | 7 | 26 | 7 |
注釈 1件
対応条件
- 以前は別名で対応していました: :after (1)
注釈 1件
対応条件
- 以前は別名で対応していました: :after (12)
注釈 3件
実装メモ
- Firefox 57 より前の Firefox には、「content」プロパティ値が「normal」または「none」に設定されている場合でも、「::after」疑似要素が生成されるというバグがありました。
- Firefox 3.5 より前では、`:after` の CSS レベル 2 動作のみがサポートされており、`position`、`float`、`list-style-*` および一部の `display` プロパティは許可されませんでした。
対応条件
- 以前は別名で対応していました: :after (1)
注釈 1件
対応条件
- 以前は別名で対応していました: :after (4)
注釈 1件
対応条件
- 以前は別名で対応していました: :after (18)
注釈 1件
対応条件
- 以前は別名で対応していました: :after (3.2)
注釈 1件
対応条件
- 以前は別名で対応していました: :before (1)
注釈 1件
対応条件
- 以前は別名で対応していました: :before (12)
注釈 3件
実装メモ
- Firefox 57 より前の Firefox には、「content」プロパティ値が「normal」または「none」に設定されている場合でも、「::before」疑似要素が生成されるというバグがありました。
- Firefox 3.5 より前では、`:before` の CSS レベル 2 動作のみがサポートされており、`position`、`float`、`list-style-*` および一部の `display` プロパティは許可されませんでした。
対応条件
- 以前は別名で対応していました: :before (1)
注釈 1件
対応条件
- 以前は別名で対応していました: :before (4)
注釈 1件
対応条件
- 以前は別名で対応していました: :before (18)
注釈 1件
対応条件
- 以前は別名で対応していました: :before (3)
基本構文
CSS
.required-field::after {
content: ' *';
color: red;
}
.quote::before {
content: '\201C';
font-size: 2em;
}ライブデモ
実務での使いどころ
-
必須フィールドのマーク付け
フォームラベルの後に::afterで赤いアスタリスクを自動追加し、必須項目を視覚的に示すことができます。
注意点
- 擬似要素はDOMに存在しないため、JavaScriptで直接操作できません。また、content プロパティが設定されていないと擬似要素は生成されません。
アクセシビリティ
- 擬似要素で挿入されたテキストはスクリーンリーダーに読み上げられる場合があります。装飾目的の場合は content: '' とし、重要な情報はHTML内に配置してください。