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

One solution would be to "fake" the underline with a bottom border. It might not work depending on the structure of your HTML, but something like this:

text-decoration: none;
border-bottom: 1px solid #FF0000;

Answer 2

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;
}

Answer 3

Use inline-block as display value for each link and apply a bottom border:

ul li a{
  display:inline-block;
  border-bottom:2px solid #eeeeee;
  float:left;
  padding: 10px;
  background-color:red;
  color:#ffffff;
  text-decoration:none;

}

change padding, background color and font color as per your style.

Answer 4

This is another solution. Put the mouse over the element!

 ul{ margin: 0; padding: 0; } ul li a{ height: 50px; position: relative; padding: 0px 15px; display: table-cell; vertical-align: middle; background: salmon; color: black; font-weight: bold; text-decoration: none; } ul li a:hover:after{ display: block; content: '\\0020'; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 3.5px; background: #000000; z-index: 9; } 

 <ul> <li><a href='#'>Menu Item</a></li> </ul>