Grow your CSS skills. Land your dream job.

::after / ::before

Last updated on:

::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::after {
  content: "hi";
}
<div>
  <!-- Rest of stuff inside the div -->
  hi
</div>

::before is exactly the same only it inserts the content before any other content in the HTML instead of after. The only reasons to use one over the other are:

  • You want the generated content to come before the element content, positionally.
  • The ::after content is also "after" in source-order, so it will position on top of ::before if stacked on top of each other naturally.

The value for content can be:

  • A string: content: "a string"; - special characters need to be specially encoded as a unicode entity. See the glyphs page.
  • An image: content: url(/path/to/image.jpg); - The image is inserted at it's exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.
  • Nothing: content: ""; - Useful for clearfix and inserting images as background-images (set width and height, and can even resize with background-size).
  • A counter: content: counter(li); - Really useful for styling lists until :marker comes along.

Note that you cannot insert HTML (at least, that will be rendered as HTML). content: "<h1>nope</h1>";

: vs ::

Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but IE 8 only supports the single-colon, so for now, it's recommended to just use the single-colon for best browser support.

:: is the newer format indented to distinguish pseudo content from pseudo selectors. If you don't need IE 8 support, feel free to use the double-colon.

Related

Other Resources

Browser Support

Little issues:

  • Firefox 3.5- wouldn't allow absolute positioning of pseudo elements.
  • In Opera 9.2, whitespace is always displayed within this pseudo-element as if it’s pre text.
  • IE 8 doesn't support z-index on them
Chrome Safari Firefox Opera IE Android iOS
2+ 1.3+ 3.5+ 6+ 8+ Yep Yep

Comments

  1. Again, what do the ‘Before’ and ‘After’ elements do?

    • Subin Varghese
      Permalink to comment#

      Check the “More Resources” section. The first link itself is “A whole bunch of cool stuff they can do.”

    • I know I’m about 3 years late..but, nonetheless –

      They just add content before or after specific elements.

      Say I want a question mark ( ? ) added after every element.

      I would style it like this:

      <style>
      p::after
      {content: "?"}
      </style>
      <p>Turn down for what</p>
      

      Would give the following output:

      Turn down for what?

      Simple as that! ;)

      “But why bother using them?” You may ask.
      Apart from the obvious effort saving reasons, these are used to implement some cool css tricks!

      Check out the ribbon at the bottom here: http://cybernext.in

      Pure CSS my friend! The ribbon’s folded corners make use of ::before and ::after pseudo elements.

      Check this out for more : http://css-tricks.com/snippets/css/ribbon/

  2. This is something that interests me (:before and :after).
    But you’ve still kept the clipped sprite from the video.

  3. Permalink to comment#

    android support?

  4. Clark
    Permalink to comment#

    This may be a silly question, but I have some confusion over the use of 2 colons to define a pseudo element.

    i.e.,
    div:after {}

    vs.
    div::after {}

    I have seen many resources on the Internet (and articles on this site) that use a single colon, but it seems that some “newer” references use double colons. In real-world use (at least as far IE is concerned, IE8 specifically), the double colon is not compatible, but the single colon usage works in IE8 and all newer browsers (at least the ones I’ve tested). So, if a single colon works, why would I ever use double colons?

    So, can someone explain the reason behind the use of the double colons?

    • Clark
      Permalink to comment#

      Oops… I guess I should have completely read the article above which summarizes the fact that IE8 doesn’t support double colon usage, and recommended to use single colons for now… that basically answers my question. Thanks.

    • Edis

      It is not that silly at all. So, in all CSS versions up to and including CSS 2.1 there was no way to differentiate what is pseudo-class and what is pseudo-element.

      I am still a beginner web developer, and although I now know a lot more than when I started, it is still sometimes confusing to properly differentiate what is pseudo-element and what is pseudo-class. The problem I believe many of us still share.

      It is so much easier to to remember that two colon (::) syntax means pseudo-element, and that one colon (:) syntax means pseudo-class. No more guess work involved.

    • Thiago Frias
      Permalink to comment#

      Is for semantic and better understand of the code, double colons is for pseudo element like ::first-line, ::-vendor-scrollbar and single colon is for pseudo class like :hover,** :active**

  5. brendan
    Permalink to comment#

    Is this not an example of ::before rather than ::after?

    hi
    — Rest of stuff in side div —

    • Don
      Permalink to comment#

      It is. Here is a CodePen showing it.

    • Edis

      In this particular case, no it is not an example of ::before pseudo-element. Let me explain it:

      Pseudo-element generates a virtual element as a last child element inside targeted element. In case you did not know every letter in an element is in a sort of a virtual element called line box. In this case the <div> element was empty (no text, no line box), and when the ::after pseudo-element was created his content “hi” string (generated by content property), was the only thing inside that <div> element, and that is the little illusion that is confusing you.

      For example, if you add any text in that <div> element, that “hi” string will end up as the last content in that element.

      I hope that helps to clarify things for you, at least a little bit.

  6. NicC
    Permalink to comment#

    Would anyone use :before or :after in the tag to generate a page header & footer? Is this semantically correct to apply a pseudo element to the tag?

    Example:

    html:after {
      content: “© 2012. All Rights Reserved.”;
      background-color: transparent;
      font-size:x-small;
      font-family: Arial, Helvetica, sans-serif;
      margin-left: 40%;
      text-align: center;
      padding-bottom: 20px;
    }
    • Edis

      I do not think so, because content of the pseudo-element is not in the DOM (can not even be selected), therefore it only exists visually for the users of visual browsers, and that excludes screen readers and web crawlers which is not a good practice.

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

      The emphasis is mine. Source: MDN Docs

  7. Permalink to comment#

    Aren’t the HTML examples backwards for ::after and ::before?

  8. RZK
    Permalink to comment#

    hi
    — Rest of stuff in side div —

    must be change to
    — Rest of stuff in side div —
    hi

  9. Today I used this information to create a common loading overlay for web apps:
    https://gist.github.com/tracend/8553152

    Thanks!

  10. Lakshya
    Permalink to comment#

    That’s cool but what is the > difference between them

  11. Jayanta Boruah
    Permalink to comment#

    Thanks for explaining the difference between : and : :

  12. Mohammad Heydari

    Simple and Perfect

  13. shishir
    Permalink to comment#

    I dont think it works in android default browzer :(..Any solution ?

  14. Seldom
    Permalink to comment#

    Thanks for the clarification about using double-colons versus not. I’d read elsewhere not to use them, which frustrated me a bit, as I thought they were a helpful in the code visually speaking.

    I see why people were saying not to use them (for the compatibility reason with older IE-versions), but my designing-with-legacy-IE-versions-in-mind days are over, so it’s double-colons on out from here!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".