Until the Houdini Paint API hits all browsers, you may feel stuck with very boring borders for your elements. Using simple CSS and ::before and ::after, you can bring some interesting ideas to all browsers.

In this tutorial, I'll show you how to make a truncated, full-gradient, skewed border for any headline or text.

What sorts of borders or stylistic elements would you make with Pseudo Elements?

New Course: Pseudo Power: Using the powerful CSS ::before and ::after pseudo elements

In this course, I'll be explaining exactly what pseudo elements are, as well as diving into many use cases for them. I'm still planning content, but just as with all my courses, there will be plenty of examples and code that can get you up and running right away. Here are a few examples of uses we'll be working through:

• Overlays
• Fancy borders
• Neat text link hovers
• Multiple decorative elements
• CSS-only tooltips

Sign up to stay up to date, as well as get a coupon code for when the course launches!