Explore the Future of the Web

Pseudo-Element Master Class

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:

  • What pseudo-elements are
  • How CSS treats them
  • The difference between pseudo-elements and pseudo-classes (and why :before and :after break those rules)
  • The basics of pseudo-elements: clearfixes
  • Why semantics and accessibility matter, and how all those empty spans are bad for screen readers
  • Problems from real projects that my team has solved with pseudo-elements
  • Browser support, and how the IE7 test determines if content is purely for style, or vital for comprehension
  • Show and tell with awesome things people can do with pseudo-elements

Get Tickets

WebVisions Barcelona explores the future of the web with a lineup of badass visionaries. July 2-4 at IED Design School.

Register Today




Hot Pepper Studios

One Inch Round