Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    ::after (:after)

    Summary

    The CSS ::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.

    Syntax

    /* CSS2 syntax */
    element:after  { style properties }
    
    /* CSS3 syntax */
    element::after { style properties }

    The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

    Examples

    Simple usage

    Let's create two classes: one for boring paragraphs and one for exciting ones. We can then mark each paragraph by adding a pseudo-element to the end of it.

    <p class="boring-text">Here is some good old boring text.</p>
    <p>Here is some moderate text that is neither boring nor exciting.</p>
    <p class="exciting-text">Contributing to MDN is easy and fun.
    Just hit the edit button to add new live samples, or improve existing samples.</p>
    .exciting-text::after {
      content: "<- now this *is* exciting!"; 
      color: green;
    }
    
    .boring-text::after {
       content:    "<- BORING!";
       color:      red;
    }

    Output

    Decorative example

    We can style text or images in the content property almost any way we want.

    <span class="ribbon">Notice where the orange box is.</span>
    .ribbon {
      background-color: #5BC8F7;
    }
    
    .ribbon::after {
      content: "Look at this orange box.";
      background-color: #FFBA10;
      border-color: black;
      border-style: dotted;
    }

    Output

    Tooltips

    The following example shows the use of the ::after pseudo-element in conjunction with the attr() CSS expression and a data-descr custom data attribute to create a pure-CSS, glossary-like tooltip. Checkout the live preview below, or you can see this example on a separate page.

    <p>Here is the live example of the above code.<br />
      We have some <span data-descr="collection of words and punctuation">text</span> here with a few
      <span data-descr="small popups which also hide again">tooltips</span>.<br />
      Dont be shy, hover over to take a <span data-descr="not to be taken literally">look</span>.
    </p>
    
    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;
      z-index: 1;
    }

    Output

     

    Specifications

    Specification Status Comment
    CSS Pseudo-Elements Level 4
    The definition of '::after' in that specification.
    Working Draft No significant changes to the previous specification.
    CSS Transitions Working Draft Allows transitions on properties defined on pseudo-elements.
    CSS Animations Working Draft Allows animations on properties defined on pseudo-elements.
    Selectors Level 3
    The definition of '::after' in that specification.
    Recommendation Introduces the two-colon syntax.
    CSS Level 2 (Revision 1)
    The definition of '::after' in that specification.
    Recommendation Initial definition, using the one-colon syntax

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    :after support (Yes) 1.0 (1.7 or earlier)[1] 8.0 4 4.0
    ::after support (Yes) 1.5 (1.8)[1] 9.0 7 4.0
    Support of animations and transitions 26 4.0 (2.0) Not supported Not supported Not supported
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    :after support ? ? ? ? ?
    ::after support ? ? ? ? ?
    Support of animations and transitions 26 4.0 (4.0) Not supported Not supported Not supported

    [1] Firefox prior to version 3.5 only implemented the CSS 2.0 version of :after. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions.

    See Also