mozilla
Your Search Results

    ::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 のみを実装していました。positionfloatlist-style-* と、いくつかの display プロパティは許可されませんでした。Firefox 3.5 でこれらの制限は取り払われました。

    関連情報

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

    Contributors to this page: marmot1123, sosleepy, ethertank
    最終更新者: marmot1123,