Changing Underline color - html

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>
<span class="red">$username</span>

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