#94: Intro to Pseudo Elements
Jan
19
2011
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:
- Nicolas Gallagher: interview, multiple backgrounds, icons
- Meet the Pseudo Class Selectors
- Matt Hamm: page curl
- CSS Triangle
Running Time: 18:37
Awesome first comment!
Awesome screencast….
but more awesome then article is the design of this comment section … . which motivated me to write comment…
Inspired… :)
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… ?
wow – great screencast – i knew the pseudo-elements before but the possibilities you are presenting are interesting!
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:
The above snippet could be useful in a print stylesheet for example.
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 :)
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
oh yeah, forgot,….. ie6 and ie7 don’t like the before and after….
thanks dude
No way! IE doesn’t have native support for something that everyone else does? THIS IS MADNESS!
Thanks Chris. Great stuff!
Cool I noticed you have Starcraft 2 on your machine :)
Great screencast as always! Thanks Chris.
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
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 …
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 :)
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.
Brilliant! Can’t wait to use this myself.
its awesome
thank you for sharing
Nice video. I’m still getting used to pseudo elements after a year of being using CSS.
i have never used pseudo elements but after reading your post,it make me do it…..i will try it
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.
Very nice article about using pseudo elements :)
How do I debug :before :after css property in Firebug or is there a different work around.
This is awesome… there are so many things one can do with this, it’s crazy. thx
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.