DEV Community

0 seconds of 7 minutes, 25 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
07:25
 
Bryan Robinson
Bryan Robinson

Posted on

3 1

Create amazing borders with CSS Pseudo Elements

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

Pseudo Power Image

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post