Grow your CSS skills. Land your dream job.

#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:

Comments

  1. Name here
    Permalink to comment#

    Awesome first comment!

    • Awesome screencast….

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

      Inspired… :)

  2. 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. Permalink to comment#

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

  4. 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. 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!

    Cheers

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

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

  10. Great screencast as always! Thanks Chris.

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

    Rob

  12. 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. 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. Permalink to comment#

    its awesome
    thank you for sharing

  17. Permalink to comment#

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

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

  19. Permalink to comment#

    Hi,
    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. 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!

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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