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

as you state, the underline and text colors need to match since they are one and the same (underlining is a text decoration). You could perhaps fake it by layering duplicate text on top of each other, with the top layer not underlined, but now we're messing with content and accessibility issues in doing that. — DA., Oct 29 '15 at 19:31
http://stackoverflow.com/questions/12804419/css-text-decoration-underline-color#12804560 — Shockwave, Oct 29 '15 at 19:33
OK, I looked at your PNG file, that's not really a text underline. Looks like you're adding a border to a container? — DA., Oct 29 '15 at 19:35

score 3 · Answer 1 · answered Oct 29 '15 at 19:35

3

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;

answered Oct 29 '15 at 19:35

Pedro M. Silva

1,298
2
12
23

score 1 · Accepted Answer · answered Oct 29 '15 at 19:36

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

score 0 · Answer 3 · answered Oct 29 '15 at 19:37

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.

Gacci · Answer 4 · 2015-10-29T20:20:36.417

0

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>

edited Oct 29 '15 at 20:20

answered Oct 29 '15 at 19:42

Gacci

1,388
1
11
23

The thing is, I want it to animate in. My template comes with an animation. If I were to replace a part of my template with this, the template wouldn't animate. And there is no way to make it animate. Thanks for the suggestion though! :-D – Ryanplays Games Oct 29 '15 at 19:51
I am not asking you to replace it with this, I am giving you an example. You did not provide code (well, one line). – Gacci Oct 29 '15 at 20:12

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

4 Answers4