#94: Intro to Pseudo Elements

Pseudo elements are visible elements on a web page that aren't "in the DOM" or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat design-y things without cluttering the markup. Pseudo elements are CSS 2, so browser support for them is pretty good!

Links from Video:


  1. Name here
    Permalink to comment#

    Awesome first comment!

    • Sandeep Jain
      Permalink to comment#

      Awesome screencast….

      but more awesome then article is the design of this comment section … . which motivated me to write comment…

      Inspired… :)

  2. Giles
    Permalink to comment#

    This is a really exciting technique. I’m an avid fan of Nathan Smiths 960 grid, but I’ve always struggled with bg images overflowing columns. In the past I’ve used negative margins to fix the problem but come up against all sorts of problems when cross browser testing (IE6). Using ‘Pseudo elements’ should void this problem… ?

  3. Felix
    Permalink to comment#

    wow – great screencast – i knew the pseudo-elements before but the possibilities you are presenting are interesting!

  4. Colin Helvensteijn
    Permalink to comment#

    There’s another cool feature of these :before and :after pseudo-elements: CSS generated content. You can actually insert the value of attributes on the HTML element into the layout, like so:

    a[href]:after { /* making sure the attribute is set */
    	content: " (" attr(href) ")"; /* easy concatenation, just spaces :-) */

    The above snippet could be useful in a print stylesheet for example.

  5. Alan
    Permalink to comment#

    Awesome screencast Chris. It just goes to show that we have a lot of tools at our disposal without jumping on buzzword technologies and with a little willingness to go our there and learn, we can all become more efficient coders.

    You just made my lunch break!

    Cheers :)

  6. Andie
    Permalink to comment#

    Hey Chris

    My first thought when I saw this was ‘buttons’ ….. using this technique we can create rounded buttons from without the need for additional markup…. works great,

    Only problem is if you want a different image for a hover then it’s no good…… unless you know different…

    Good screencast though!


  7. Andie
    Permalink to comment#

    oh yeah, forgot,….. ie6 and ie7 don’t like the before and after….

    thanks dude

    • Jack Nycz
      Permalink to comment#

      No way! IE doesn’t have native support for something that everyone else does? THIS IS MADNESS!

  8. Jackie
    Permalink to comment#

    Thanks Chris. Great stuff!

  9. Keyamoon
    Permalink to comment#

    Cool I noticed you have Starcraft 2 on your machine :)

  10. Web Design DC
    Permalink to comment#

    Great screencast as always! Thanks Chris.

  11. Robert
    Permalink to comment#

    Hey Chris

    Just want to say i’m a big fan of your site – great information presented in a very usable, accessible way, keep up the awesome work.

    I’ve used some of the techniques in this video to draw in some elements to a nav bar, that otherwise would have resulted in some very clunky, crusty (as you say) HTML markup, and it’s working brilliant, thanks to your tips.

    My question is, are there any known issues or bugs in certain browsers with using pseudo elements in this way that we as a community should be aware of?

    Many thanks


  12. SpamBot
    Permalink to comment#

    I seem to remember using this to insert extra html markup generated by a widget in wordpress.

    I can’t remember if it actually worked or if I resorted to altering the code for the widget … maybe a bit of both …

  13. lisa
    Permalink to comment#

    Hey Chris – Thanks for the screencast.

    What is the support of these pseudo elements? You may have mentioned sorry if I didn’t hear.

    lisa :)

  14. Grant Z
    Permalink to comment#

    Chris, thanks so much. This technique has been eluding me until now. Your explanation was so simple and clear that I’m ready to start playing around with it. Thanks again for keeping this up.

  15. Brady
    Permalink to comment#

    Brilliant! Can’t wait to use this myself.

  16. idris
    Permalink to comment#

    its awesome
    thank you for sharing

  17. andy
    Permalink to comment#

    Nice video. I’m still getting used to pseudo elements after a year of being using CSS.

  18. Shop Fitter Brisbane
    Permalink to comment#

    i have never used pseudo elements but after reading your post,it make me do it…..i will try it

  19. Rafique
    Permalink to comment#

    I am not going to comment about this screen-cast as I am just downloading it. I have become your fan from lynda.com’s wordpress theme tutorials . You have contributed a lot to teach us nice web designing. Here I am going to urge you for some more specific screen-casts on importing feeds to a WordPress Site (Specially when we go to develop a newspaper site from external feeds). Please do it. Though your Simple Pie screen cast is awesome but I hope you will publish screen-cast based on WordPress and if it would be custom code, would help us a lot.

    Thanks for your contribution as I really have got a new dimension to learning web design.

  20. Cool Dude
    Permalink to comment#

    Very nice article about using pseudo elements :)

    How do I debug :before :after css property in Firebug or is there a different work around.

  21. Armando Cerrillo
    Permalink to comment#

    This is awesome… there are so many things one can do with this, it’s crazy. thx

  22. Sara
    Permalink to comment#

    Thank you for this, Chris!

  23. Cporoske

    Cool.Thanks for u good screencast.i learn a lot from.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.