概要
CSS の :after 擬似要素 は、選択した要素の仮想的な最後の子要素にマッチします。典型的な用途は、CSS の content プロパティを使って、ある要素に装飾的なコンテンツを追加するものです。この要素はデフォルトではインラインです。
構文
element:after { style properties } /* CSS2 構文 */
element::after { style properties } /* CSS3 構文 */
2 コロンの記法 (::after) は擬似クラスと擬似要素の見分けをはっきりさせるために CSS 3 で導入されました。CSS 2で導入された記法 :after も、多くのブラウザで使えます。
例
シンプルな使い方
.boringtext::after {
content: " Thank you for reading all this!";
font-size: small;
color: red;
background: gray;
}
ツールチップ
次の例は、::after 擬似要素 を CSS の attr() 関数と data-descr カスタムデータ属性 と連携させて 純粋な CSS を作るもので、用語解説風のツールチップです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS tooltips</title>
<style>
span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
}
</style>
</head>
<body>
<p>This is an example <span data-descr="collection of words and punctuation">text</span> with a few <span data-descr="small popups which also hide again">tooltips</span>. Take a <span data-descr="not to be taken literally">look</span>...
</p>
</body>
</html>
仕様書
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Pseudo-Elements Level 4 The definition of '::after' in that specification. |
草案 | 前回の版から重要な変更はなし |
| CSS Transitions | 草案 | 擬似要素で定義されたプロパティのトランジションを許可 |
| CSS Animations | 草案 | 擬似要素で定義されたプロパティのアニメーションを許可 |
| Selectors Level 3 The definition of '::after' in that specification. |
勧告 | 2 個のコロンの構文を導入 |
| CSS Level 2 (Revision 1) The definition of '::after' in that specification. |
勧告 | 初回定義。 1 個のコロンの構文のみ |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
:after のサポート |
(有) | 1.0 (1.7 or earlier) [1] | 8.0 | 4 | 4.0 |
::after のサポート |
(有) | 1.5 [1] | 9.0 | 7 | 4.0 |
| アニメーションとトランジションのサポート | 26 | 4.0 (2.0) | 未サポート | 未サポート | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
:after のサポート |
? | ? | ? | ? | ? |
::after のサポート |
? | ? | ? | ? | ? |
| アニメーションとトランジションのサポート | 26 | 4.0 (4.0) | 未サポート | 未サポート | 未サポート |
[1] バージョン 3.5 以前の Firefox は CSS 2.0 バージョンの :after のみを実装していました。position、float、list-style-* と、いくつかの display プロパティは許可されませんでした。Firefox 3.5 でこれらの制限は取り払われました。