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.
