这里有这个代码：
echo'$username '；
首先，正如你看到的，它被加了下划线。 其次，所有字符都是红色的。 那么，是否会将文本$ username保留为红色，下划线为黑色？
所以，标签。
不推荐使用HTML4
有新的css3属性。 是文本修饰颜色
因此，现在可以使用某种颜色的文本和带文本装饰的下划线。 使用其他颜色可以使用其他颜色，而无需添加“换行符”元素
p {
文本修饰： Underline；
- WebKit-text-decoration-color : red；/* safaristillusesvendorprefix * /
文本修饰-颜色： red；
}
黑莓textwithredunderlineinoneelement-nowrapperelementshere！
代码笔
注意：
1 )目前浏览器支持仅限于Firefox、chrome (完全受v 57支持)和Safari
2 )您也可以使用文本修饰速记属性，例如：
||||||
.因此，使用文本修饰速记-上面的示例很简单：
p {
文本修饰3360 underline red；
}
p {
文本修饰3360 underline red；
}
黑莓textwithredunderlineinoneelement-nowrapperelementshere！
这很酷，但不仅缺乏支持，而且有更多的控制权。 使用边框-底部-底部可以获得更多的控件，但长时间使用在线块一定会破坏魔力。 所以，这是最好的解决办法。
2016年Chrome支持不足。 叹口气。
两年后，该属性实际上不支持浏览器。 有关单行下划线，请参阅以下概述的方法。
@JasonS-Chrome目前完全支持此： )
更新作者：
现在，这个答案已经过时了，因为大多数现代浏览器都支持文本修饰颜色。
: pseudo em
为了准确复制本地文本修饰： underline的大小、笔划宽度和位置，必须在不添加HTML标记的情况下使用仿真元素和em单位。 这样，可以在不添加标签的情况下精确缩放元素并在本地工作。
的CSS
` a {
文本修饰：无；
display :在线表；
}
a:after {
内容： '；
border-bottom : 0.1 em固态# f00；
显示：表复制；
caption-side: bottom；
position: relative；
margin-top:-0.15em；
(`
通过在伪元素中使用display:table-caption和caption-side显示inline-table，可以在缩放时将线条和链接与浏览器精确垂直对齐。
在这种情况下，使用inline-table而不是inline-block来强制伪显示，而不指定高度或负值。
范例
jsfiddle:https://jsfiddle.net/poh uski/8 yfpjuod/8 /
代码pen:http://代码pen.io/poh uski/pen/vezxpj|(例如，比例() ) ) ) ) ) )。
测试成功：
互联网资源管理器： 8、9、10、11
Firefox:41、40、39、38、37和36
铬： 45、44、43、42
Safari:8、7、6.2
移动Safari:9.0、8.0
安卓浏览器： 4.4、2.3
海豚手机： 8，11.4
1提供用于伪元素的纯CSS方法，以适当控制下划线属性
虽然是一个很棒的解决方案，但在Chrome中只能让它看起来很好。 其他浏览器也可以使用吗？ 在Firefox中完全损坏。
已更新回答以使用@Richardbcaption-side属性。 这个属性需要解释那些浏览器的怪癖。 更新了小提琴和代码笔的链接。
多行文本/链接的行为与文本装饰不同。 最好使用另一个要素/跨度。
/p>这不适用于包裹在多行上的元素，或者如果您有1行元素可以按比例缩小并包裹在移动设备上。如果您在测试中添加了足够的内容，它们将中断。
除了已经说过的内容外，这还会用下划线字母(例如g。
实际上，如果使用span元素而不是font，则是可能的：
u { color: black; }
.red { color: red }
$username
参见jsfiddle。似乎可以在Chrome，Safari，Firefox，IE，Opera上运行(已在Win 7上进行了最新版本的测试)。
问题中的代码也应该起作用，但是由于某种原因在WebKit浏览器(Chrome，Safari)上不起作用。
根据CSS规范："文本修饰所需的颜色必须从设置了"文本装饰"的元素的"颜色"属性值中得出。即使后代元素的"颜色"值不同，装饰的颜色也必须保持相同。"
当今读者注意事项：不建议使用，但您也可以使用其他元素(例如div或span)和CSS来实现相同的样式。
HTML 4中不推荐使用，但是HTML 5为它提供了普通元素的状态(HTML 5不使用"不赞成"一词；而是使用了"过时")。 HTML 5以一种怪异的方式重新定义了的含义，但这是另一回事。关于此问题，中唯一重要的是它(默认情况下)导致其内容显示为下划线。 w3.org/TR/html/textlevel-semantics.html#elementdef-u
不能。您最好的办法是使用具有不同颜色的border-bottom，但这并不是真正的重点。
实际上，这似乎可以正常工作... stackoverflow.com/questions/12804419/
这是错误的；请参阅下面有关text-decoration-color的评论。
CSS 3支持这一点。查看浏览器。 caniuse.com/#feat=文本装饰
解决这个问题的最简单方法是使用CSS：
.redUnderline {
color: #ff0000;
border-bottom: 1px solid #000000;
}
$username
另外，对于实际的下划线，如果您的项目是链接，则可以这样做：
a.blackUnderline {
color: #000000;
text-decoration: underline;
}
.red {
color: #ff0000;
}
$username
您还可以使用box-shadow属性模拟下划线。
这是一个小提琴。
想法是使用两个分层的框阴影将线放置在与下划线相同的位置。
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);
}
danield描述的另一种方式是内联显示子容器宽度以及所需的手印颜色。父元素的宽度为文本修饰的宽度，以及所需的下划线颜色。像这样：
div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div span{color:#000;display:inline}
Hover me, i can have many lines
+1这是Jukka在回答中描述的现代版本(已弃用)。
伪元素效果最好。
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;
}
参见jsfiddle。
您不需要任何额外的元素，可以将其放置在离文本尽可能近的位置(根据我的喜好，border-bottom有点远)，如果链接结束，则不会显示任何其他颜色可以使用其他颜色的背景(例如使用box-shadow技巧)，并且可以在所有浏览器中使用(text-decoration-color到目前为止仅支持Firefox)。
可能的缺点：链接不能处于position：static，但这在大多数时候可能不是问题。只需将其设置为相对，一切都很好。
我认为最简单的方法是在CSS中使用：
text-decoration-color: red;
这将更改下划线的颜色，而不会更改文本的颜色。祝好运！
在这里我们可以在文本中用颜色创建下划线
The color of the lines should now be red!
要么
线条的颜色现在应该是红色！
The color of the lines should now be red!您可以用包装并使用此小JQuery插件为下划线着色。
您可以通过将参数传递给插件来修改颜色。
(function ($) {
$.fn.useful = function (params) {
var aCSS = {
'color' : '#d43',
'text-decoration' : 'underline'
};
$.extend(aCSS, params);
this.wrap('');
var element = this.closest('a');
element.css(aCSS);
return element;
};
})(jQuery);
然后，您通过编写以下代码进行调用：
$("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('');
this.closest('a').css(aCSS);
};
// Use example:
$("span.name").css(spanCSS).useful({color:'red'});
});
Bob
-
Bali
Dude
-
Los Angeles
Gérard
-
Paris
您可以使用此CSS"模拟"下划线：
text-decoration: none;
border-bottom: 1px solid #000;
我遇到的最好的方式是这样的：
HTML5：
Initial Colors Different Colors
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;
}
border-bottom的问题是文本和行之间的额外距离。 text-decoration-color的问题是缺少浏览器支持。因此，我的解决方案是使用带有线条的背景图像。这支持线条的任何标记，颜色和样式。 top(在我的示例中为12px)取决于文本的line-height。
u {
text-decoration: none;
background: transparent url(blackline.png) repeat-x 0px 12px;
}