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" rel="stylesheet"><div class="barlow">
<span class="underline">
<span class="overline">ADD UNDERLINE AND OVERLINE</span>
</span>

</div>

And there you have it! It’s easy when you know the trick, but it definitely is not immediately clear.

Full-time software engineer since 2016. UCLA Computer Science B.S. with Atmospheric and Oceanic Sciences minor, class of ‘16.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store