Grow your CSS skills. Land your dream job.

Videos of my Pseudo Elements Talk

Published by Chris Coyier

I've given this one a few times now, and luckily a few of them were recorded.

Front End Design Conference

In St. Petersburg, Florida - July 2011.

WordCamp San Francisco

In San Francisco, California - August 2011. This one is tweaked a bit to be shorter and more about WordPress.



  1. Charbs
    Permalink to comment#

    Really like your sense of humour :) Makes it more fun to pick up any extra tricks. Thanks for sharing Chris. (still got about an hour to go)

  2. Permalink to comment#

    I really love watching your talks and screencasts. I’m not sure what it is but you have a really relaxing way of talking to the general public that keeps me interested and always teaches me something!

    Great talk!

    • UpWorks
      Permalink to comment#

      @Jon – I agree with you completely. Its a treat when Chris publishes a new screen cast. w00t!

  3. John
    Permalink to comment#

    Your talks are awesome, +20 points for south park voice!! Pseudo Elements are delicious, I wish educational instructors at my local colleges were as entertaining to listen to rather than knuckle drag around the room talking about tables and other awesome obsolete methods.

    Looking forward to more, as always.

  4. Rogier
    Permalink to comment#

    Good stuff man!

  5. Stephen
    Permalink to comment#

    Thanks, This is great stuff ! I learned something new today.

  6. Tomasz
    Permalink to comment#

    5 minutes after watching Your video my markup got cleaner and my CSS easier to understand =:D Thanks!

  7. Permalink to comment#

    @41:22 in the first video:

    That’s some use-it-now-sh*t, yo!

  8. Great talk!!

  9. exessqd
    Permalink to comment#

    I see the title and think to myself: “How could I miss this? Chris Coyier in Russia! “.

    But its St. Petersburg, Florida. Oh, ok…

  10. Permalink to comment#

    Thanks Chris for sharing your videos! I really enjoyed your talk at the PDX Un-conference this summer too.

  11. Permalink to comment#

    cool,i like your tutorial

  12. Jawad
    Permalink to comment#

    Thanks Chris for sharing this nice and useful information :)

  13. Permalink to comment#

    How come no one has mentioned that while Chris is a genius in regards to pseudo elements, he needs to learn how to spell “pseudo” (the title of the blog post..) – just kidding ;)

  14. Per
    Permalink to comment#

    Excellent talk, thanks for sharing Chris!

  15. Richard Ambler
    Permalink to comment#

    Thanks for making this all make more sense. I’m always trying to learn new things and I got a lot of great ideas from your presentation. I also appreciate your sense of humor.

  16. Bruno Moreira
    Permalink to comment#

    Hi, I’m Brazillian and I subscribe your site everyday…It’s a very good job to all webdesigners. I wanna say thank you for sharing and give you congratulations…Thanks!!

  17. hi,

    Chris has got real good voice
    knows how to explain
    sense of humor

    he is a teacher in spirit able to keep attention ;]

  18. Konstantinos
    Permalink to comment#

    Great talk! Thanks for sharing.

  19. Bert de Vries
    Permalink to comment#

    Thanks for vids. As always: Great!

  20. greenz
    Permalink to comment#

    Amazing this can definitely help me with some design elements for my current project

  21. Catalin
    Permalink to comment#

    Hey Chris, slides PLEASE? :) I need the named codes.. or what ever ! the thing with :before{content:”\2010c”;}

    Thanks! :)

  22. greenz
    Permalink to comment#

    Chris i just implemented my first pseudo class elements. Before & after to be specific. I setup a icon after a name like you did in your example on pg 32 but i want to have a separate link for both the name and the icon. I’ve searched the documentation but couldn’t find anything is this possible?

  23. I’ll add another great usage of pseudo element I’m using… having buttons with gradients and icon… you can have multiple background, so one can style button with the gradient and the icon together, but one wold have to repeat the gradient for each icon (e.g. you have save, edit, delete you would have to specify not only those icons but also the gradient for each button class). So I style the button with gradient and then use pseudo element on different button class to define icons …

  24. Permalink to comment#

    You’re a funny guy…

    Diggin the new look on the site BTW.

  25. Eulen Mesquita
    Permalink to comment#

    You’re fantastic man. Tank you very much for the video.

  26. Permalink to comment#

    I’m soo exited about pseudo elements now! *3*

  27. Amit Erandole
    Permalink to comment#

    Where are the slides, Chris?

  28. Permalink to comment#

    having trouble.. any help would be hot. Have a drop down list ul inside of ul.. trying to target the first-child of the first ul only.. nav>ul>li:first-child not working and nav ul li:first-child selects all first li. thoughts?

This comment thread is closed. If you have important information to share, you can always contact me.

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