Changing Underline color

Question

I have this code here:

echo "<u><font color='red'><br>$username</font></u>";

Firstly, as you can see, it's underlined (< u >). Second, all text is all red. Well is there anyway to leave the text ($username) red but the underline black?

Answer 1

There's now a new css3 property for this: text-decoration-color

So you can now have text in one color and a text-decoration underline - in a different color... without needing an extra 'wrap' element

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>

Codepen

NB:

1) Browser Support is limited at the moment to Firefox and Chrome (fully supported as of V57) and Safari

2) You could also use the text-decoration shorthand property which looks like this:

<text-decoration-line> || <text-decoration-style> || <text-decoration-color>

...so using the text-decoration shorthand - the example above would simply be:

p {
  text-decoration: underline red;
}

p {
  text-decoration: underline red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>

Answer 2

Update from author:
This answer is outdated since text-decoration-color is now supported by most modern browsers.

---

:pseudo + em

In order to accurately replicate the size, stroke width, and positioning of the native text-decoration:underline without introducing extra HTML markup, you should use a pseudo-element with em units. This allows for accurate scaling of the element and native behavior without additional markup.

CSS

a {
  text-decoration: none;
  display: inline-table;
}

a:after {
  content: "";
  border-bottom: 0.1em solid #f00;
  display: table-caption;
  caption-side: bottom;
  position: relative;
  margin-top:-0.15em;
}

By using display:table-caption and caption-side on the pseudo-element and display inline-table, we can force the browser to vertically-align both line and link accurately, even when scaled.

In this instance, we use inline-table instead of inline-block to force the pseudo to display without the need to specify height or negative values.

Examples

JSFIDDLE: https://jsfiddle.net/pohuski/8yfpjuod/8/
CODEPEN: http://codepen.io/pohuski/pen/vEzxPj | (example with scaling)

Successfully Tested On:
Internet Explorer: 8, 9, 10, 11
Firefox: 41, 40, 39, 38, 37, 36
Chrome: 45, 44, 43, 42
Safari: 8, 7, 6.2
Mobile Safari: 9.0, 8.0
Android Browser: 4.4, 2.3
Dolphin Mobile: 8, 11.4

Answer 3

No. The best you can do is to use a border-bottom with a different color, but that isn't really underlining.

Answer 4

In practice, it is possible, if you use span element instead of font:

<style>
u { color: black; }
.red { color: red }
</style>
<u><span class='red'><br>$username</span></u>

See jsfiddle. Appears to work on Chrome, Safari, Firefox, IE, Opera (tested on Win 7 with newest versions).

The code in the question should work, too, but it does not work for some reason on WebKit browsers (Chrome, Safari).

By the CSS spec: “The color(s) required for the text decoration must be derived from the 'color' property value of the element on which 'text-decoration' is set. The color of decorations must remain the same even if descendant elements have different 'color' values.”

Answer 5

The easiest way I've tackled this is with CSS:

<style>
.redUnderline {
    color: #ff0000;
    border-bottom: 1px solid #000000;
}
</style>
<span class="redUnderline">$username</span>

Also, for an actual underline, if your item is a link, this works:

<style>
a.blackUnderline {
   color: #000000;
   text-decoration: underline;
}
.red {
    color: #ff0000;
}
</style>
<a href="" class="blackUnderline"><span class="red">$username</span></a>

Answer 6

You can also use the box-shadow property to simulate an underline.

Here is a fiddle. The idea is to use two layered box shadows to position the line in the same place as an underline.

a.underline {
    text-decoration: none;
    box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 1), inset 0 -5px 0 0 rgba(255, 0, 0, 1);
}

Answer 7

Another way that the one described by danield is to have a child container width display inline, and the tipography color you want. The parent element width the text-decoration, and the color of underline you want. Like this:

div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div span{color:#000;display:inline}

<div>
  <span>Hover me, i can have many lines</span>
</div>

Answer 8

A pseudo element works best.

a, a:hover {
  position: relative;
  text-decoration: none;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  height: 0;
  top:90%;
  left: 0;
  right: 0;
  border-bottom: solid 1px red;
}

See jsfiddle.

You don't need any extra elements, you can position it as close or far as you want from the text (border-bottom is kinda far for my liking), there aren't any extra colors that show up if your link is over a different colored background (like with the box-shadow trick), and it works in all browsers (text-decoration-color only supports Firefox as of yet).

Possible downside: The link can't be position:static, but that's probably not a problem the vast majority of the time. Just set it to relative and all is good.

Answer 9

You can use this CSS to "simulate" an underline:

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

Answer 10

You can wrap your <span> with a <a> and use this little JQuery plugin to color the underline. You can modify the color by passing a parameter to the plugin.

    (function ($) {
        $.fn.useful = function (params) {

            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);

            this.wrap('<a></a>');
            var element = this.closest('a');
            element.css(aCSS);
            return element;
        };
    })(jQuery);

Then you call by writing this :

    $("span.name").useful({color:'red'});

$(function () {

        var spanCSS = {
            'color' : '#000',
            'text-decoration': 'none'
        };
        
        $.fn.useful = function (params) {
            
            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);
            this.wrap('<a></a>');
            this.closest('a').css(aCSS);
        };

        // Use example:
        $("span.name").css(spanCSS).useful({color:'red'});



    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="container">

    <div class="user important">
        <span class="name">Bob</span>
        -
        <span class="location">Bali</span>
    </div>

    <div class="user">
        <span class="name">Dude</span>
        -
        <span class="location">Los Angeles</span>
    </div>


    <div class="user">
        <span class="name">Gérard</span>
        -
        <span class="location">Paris</span>
    </div>

</section>

Answer 11

here we can create underline with color in text

<u style="text-decoration-color: red;">The color of the lines should now be red!</u>

or

The color of the lines should now be red!

<h1 style=" text-decoration:underline; text-decoration-color: red;">The color of the lines should now be red!</u>

Answer 12

I think the easiest way to do this is in your css, use:

text-decoration-color: red;

This will change the color of the underline without changing the color of your text. Good luck!

Answer 13

Best way I came across doing is like this:

HTML5:

<p>Initial Colors <a id="new-color">Different Colors</a></p>

CSS3:

p {
    color: #000000;
    text-decoration-line: underline;
    text-decoration-color: #a11015;
}

p #new-color{
    color: #a11015;
    text-decoration-line: underline;
    text-decoration-color: #000000;
}

Answer 14

Problem with border-bottom is the extra distance between the text and the line. Problem with text-decoration-color is lack of browser support. Therefore my solution is the use of a background-image with a line. This supports any markup, color(s) and style of the line. top (12px in my example) is dependent on line-height of your text.

 u {
    text-decoration: none;
    background: transparent url(blackline.png) repeat-x 0px 12px;
}