Create a custom underline with CSS

There are broadly 2 ways of customising underlines with CSS.

1. The native way

CSS Level 4 gives you the following 4 options: solid, double, dotted, dashed, and wavy.

.element {
  text-decoration-style: wavy;
}

2. The Gradient way

.element {
  background-image: linear-gradient(var(--highlight), var(--highlight));

  /* Without this, it doesn't work and fills the entire container with a flat color */
  background-repeat: no-repeat;

  /* background-size will give you the width/height */
  background-size: 80% 1px;
  background-position: center top;
}