::after (:after)

概要

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 でこれらの制限は取り払われました。

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: marmot1123, ethertank, sosleepy
 最終更新者: marmot1123,