#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. User Avatar
    Name here
    Permalink to comment#

    Awesome first comment!

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

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

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

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

    thanks dude

    • User Avatar
      Jack Nycz
      Permalink to comment#

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

  8. User Avatar
    Permalink to comment#

    Thanks Chris. Great stuff!

  9. User Avatar
    Permalink to comment#

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

  10. User Avatar
    Web Design DC
    Permalink to comment#

    Great screencast as always! Thanks Chris.

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

    Brilliant! Can’t wait to use this myself.

  16. User Avatar
    Permalink to comment#

    its awesome
    thank you for sharing

  17. User Avatar
    Permalink to comment#

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

  18. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Armando Cerrillo
    Permalink to comment#

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

  22. User Avatar
    Permalink to comment#

    Thank you for this, Chris!

  23. User Avatar

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

Leave 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.