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

Tremaine Eto
2 min readJul 2, 2020

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).


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;


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=";500;600;700;800&display=swap" rel="stylesheet"><div class="barlow">
<span class="underline">
<span class="overline">ADD UNDERLINE AND OVERLINE</span>


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



Tremaine Eto

Senior Software Engineer @ Iterable | Previously worked at DIRECTV, AT&T, and Tinder | UCLA Computer Science alumni | Follow me for software engineering tips!