How can I change the colour of my text without using the colour attribute? (HTML & CSS)

Question

On my website, I have used a customisable template for my navigation bar. The thing I want to do is to change the underlining colour of the text and not change the actual colour of the text (and as you know the underlining feature and the text have to be in the same selector. Now you might be thinking, just make a vertical rule and colour it! The thing is, I do not know the amount of space between an underline and a piece of text. Is there any way to colour the text a different colour from the underline? Thanks!

Screenshots:

Code Input: 1
Result: 2

Answer 1

You cannot isolate the underline color and control it separate from text color; it inherits the same color from the text.

However, you can use border, instead.

nav a {
    color: white
    text-decoration: none;
    border-bottom: 1px solid salmon;
    background-color: salmon;
}

nav a.active {
    color: #333;
    border-bottom: 1px solid #333;
}