Create a custom underline with CSS
For hover effect with underline or custom top/bottom border, see src/templates/blog-post.module.scss
.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;
}