DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
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 to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay