[Resolved] Underlining Text With different color + space underneath

[casey]

hello,

I’m having trouble figuring out how to underline text with a different color and then having some space below it. I added the class “underlineblue” for the times I want to use this. I understand you could use borders in CSS but the problem I run into there is that the underline is longer than the word (it extends further to the right, I’d like it to be as long as the word).

Here’s the current CSS I’m using:

.underlineblue {
		text-decoration: underline;
    text-decoration-color: #0693e3;
	}

I’d like it to look something like this: https://barbend.com/ (where they underlined “More From BarBend”)

And you can see my attempt in the link provide below where I underlined “Popular Posts”

Thanks for your help.

[Leo]

Hi there,

Try this instead:

.underlineblue {
    border-bottom: 2px solid #8ec642;
    display: inline-block;
}

[casey]

perfect, thanks!

[Leo]

No problem 🙂

[Author]

Posts