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>
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}_x000D_
div span{color:#000;display:inline}
_x000D_
<div>_x000D_
<span>Hover me, i can have many lines</span>_x000D_
</div>
_x000D_
You can use this CSS to "simulate" an underline:
text-decoration: none;
border-bottom: 1px solid #000;
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);
}
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;
}
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 {_x000D_
text-decoration: underline;_x000D_
-webkit-text-decoration-color: red; /* safari still uses vendor prefix */_x000D_
text-decoration-color: red;_x000D_
}
_x000D_
<p>black text with red underline in one element - no wrapper elements here!</p>
_x000D_
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 {_x000D_
text-decoration: underline red;_x000D_
}
_x000D_
<p>black text with red underline in one element - no wrapper elements here!</p>
_x000D_
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>
_x000D_
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>
_x000D_
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!
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.
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.”
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 () {_x000D_
_x000D_
var spanCSS = {_x000D_
'color' : '#000',_x000D_
'text-decoration': 'none'_x000D_
};_x000D_
_x000D_
$.fn.useful = function (params) {_x000D_
_x000D_
var aCSS = {_x000D_
'color' : '#d43',_x000D_
'text-decoration' : 'underline'_x000D_
};_x000D_
_x000D_
$.extend(aCSS, params);_x000D_
this.wrap('<a></a>');_x000D_
this.closest('a').css(aCSS);_x000D_
};_x000D_
_x000D_
// Use example:_x000D_
$("span.name").css(spanCSS).useful({color:'red'});_x000D_
_x000D_
_x000D_
_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<section class="container">_x000D_
_x000D_
<div class="user important">_x000D_
<span class="name">Bob</span>_x000D_
-_x000D_
<span class="location">Bali</span>_x000D_
</div>_x000D_
_x000D_
<div class="user">_x000D_
<span class="name">Dude</span>_x000D_
-_x000D_
<span class="location">Los Angeles</span>_x000D_
</div>_x000D_
_x000D_
_x000D_
<div class="user">_x000D_
<span class="name">Gérard</span>_x000D_
-_x000D_
<span class="location">Paris</span>_x000D_
</div>_x000D_
_x000D_
</section>
_x000D_
Update from author:
This answer is outdated since text-decoration-color is now supported by most modern browsers.
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.
`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.
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
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;
}
Source: Stackoverflow.com