::after / ::before

::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. User Avatar
    Ethan Thatcher
    Permalink to comment#

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

    • User Avatar
      Subin Varghese
      Permalink to comment#

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

    • User Avatar
      Vin

      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. User Avatar
    Druid of Lûhn
    Permalink to comment#

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

  3. User Avatar
    kevin
    Permalink to comment#

    android support?

  4. User Avatar
    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?

    • User Avatar
      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.

    • User Avatar
      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.

    • User Avatar
      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. User Avatar
    brendan
    Permalink to comment#

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

    hi
    — Rest of stuff in side div —

    • User Avatar
      Don
      Permalink to comment#

      It is. Here is a CodePen showing it.

    • User Avatar
      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.

    • User Avatar
      Firoz
      Permalink to comment#

      I want to learnt after and before.
      how to learnt about the after and before ?
      please I want to solution

    • User Avatar
      Firoz
      Permalink to comment#

      after before

  6. User Avatar
    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;
    }
    • User Avatar
      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. User Avatar
    Kyle
    Permalink to comment#

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

  8. User Avatar
    RZK
    Permalink to comment#

    hi
    — Rest of stuff in side div —

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

  9. User Avatar
    Makis Tracend
    Permalink to comment#

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

    Thanks!

  10. User Avatar
    Lakshya
    Permalink to comment#

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

  11. User Avatar
    Jayanta Boruah
    Permalink to comment#

    Thanks for explaining the difference between : and : :

  12. User Avatar
    Mohammad Heydari

    Simple and Perfect

  13. User Avatar
    shishir
    Permalink to comment#

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

  14. User Avatar
    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!

    • User Avatar
      Firoz
      Permalink to comment#

      I want to learnt after and before.
      how to learnt about the after and before ?
      please I want to solution

  15. User Avatar
    Salman
    Permalink to comment#

    HI every one in need to give background. But the main issue is want to that the backgrond should apply from left to right and as its come to right site the hight of background should decrease as it come to right side ……… how can i apply it in CSS3

  16. User Avatar
    AJ Kandy
    Permalink to comment#

    Resurrecting this thread – is it possible to apply a pseudo-element to :after content? For instance, if you wanted to apply :first-letter to it in a neat CSS way, vs. having to hack it with some sort of targeted JS string parsing.

  17. User Avatar
    Deangelis
    Permalink to comment#
  18. User Avatar
    srinivas
    Permalink to comment#

    i use before tag to paragraph. i use image in that before tag. how can i fix the hight and width of that image.

  19. User Avatar
    Ionut Botizan
    Permalink to comment#

    You forgot the attr function which allows you to do stuff like:

    [data-tooltip]::before {
        content: attr(data-tooltip);
        /* ... */
    }
    
  20. User Avatar
    Randall Glass
    Permalink to comment#

    The content image can be resized.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .image:before {
    display:inline-block;
    content:url("MyImage.png");
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
    }
    
    .image {
    width:300px;
    height:300px;
    }
    
    </style>
    </head>
    <body>
    <div class="image"></div>
    </body>
    </html>
    
    
  21. User Avatar
    Tobitron
    Permalink to comment#

    So what is the benefit of using ::after/::before vs using JQuery. I’m having trouble imagining a scenario when I wouldn’t just do this in jQuery.

    • User Avatar
      Simon
      Permalink to comment#

      Besides the obvious reasons that you’re using “native” implementations (giving you a better understanding of what you’re actually doing), using a CSS pseudo element is faster than using JavaScript. DOM manipulation is very expensive.

    • User Avatar
      Tobitron
      Permalink to comment#

      Great answer, thanks!

  22. User Avatar
    Amitoj Singh

    Great. Wanted to learn this “after before” thing since long but learned today only when stucked into something that needs this knowledge to proceed. Wanted to code heading decorations on two projects of mine ( lotterywale and punjabstatelottery)

    I hope I will be able to code that successfully. Will ask for help here otherwise.

    Thanks much,
    Amitoj

  23. User Avatar
    JJ
    Permalink to comment#

    Is it possible to use the psuedo elements within a class?

    e.g.

    .className li::before {

    }

    Thanks

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag