How to add both an underline and an overline to your text (and in different colors) with HTML and CSS

If you’re here, you probably have the niche need to add not only an underline to your text with HTML and CSS, but also an overline (which, like the name implies, is basically the underline but over the text).

CSS

To make the text look like the image above, I used the following CSS. For underline and overline, you only need the first two tags. The barlow tag is just the font I used.

.underline {
   text-decoration: underline;
   text-decoration-color: #E56EA4;
}
.overline {
   text-decoration: overline;
   text-decoration-color: #31466D;
}
.barlow {
   font-size: 50px;
   font-family: "Barlow Condensed", sans-serif;
}

HTML

This is the key. You can use two <span> tags, one nesting the other, to apply both the underline and overline to the text.

You probably at some point realized you could not apply two text-decoration’s within the same tag, and you probably tried to see if you could apply many with a comma. That apparently does not work. Here you go:

<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&display=swap"…