A challenge that faces modern front-end designers often is the balancing act between semantic code and code that does all the things we need it to do. We need separators between nav items and breadcrumbs, or icons after links; little pieces of non-semantic code that mess with accessibility and make our markup ugly and unweildy.
Fortunately, with the rise of modern browsers, we have tools at our disposal to keep little bits of extra styling enclosed in our stylesheets, instead of muddying our markup with empty divs and spans. We can now add all those cool flourishes and extras while keeping our markup semantic and accessible: enter pseudo-elements.
This session will teach attendees how to use advanced CSS techniques to manipulate images in the browser, add flourishes without ruining the markup, and reduce the loading time by eliminating unnecessary images.
From pure CSS tooltips to link-type icons; from image borders to gradient overlays; from multiple backgrounds to typographic flourishes; pseudo-elements are capable of so much more than just clearfixes. Jason Lengstorf will show real-world examples of pseudo-elements being awesome, including code samples and demos available on GitHub.
A few of the things we will cover: