我这里有这段代码：
echo "<u><font color='red'><br>$username</font></u>";
首先，如您所见，它带有下划线（）。其次，所有的文字都是红色的。那么有没有让文本 ($username) 为红色但下划线为黑色？
【问题讨论】：
<font>标签。
<u> 在 HTML4 中已弃用
现在有一个新的 css3 属性：text-decoration-color
因此，您现在可以使用一种颜色的文本和文本装饰下划线 - 使用不同的颜色...而不需要额外的“换行”元素
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>注意：
1) Browser Support 目前仅限于 Firefox 和 Chrome（从 V57 开始完全支持）和 Safari
2) 您还可以使用如下所示的text-decoration 速记属性：
<text-decoration-line> || <text-decoration-style> || <text-decoration-color>
...所以使用 text-decoration 速记 - 上面的示例只是：
p {
text-decoration: underline red;
}
p {
text-decoration: underline red;
}<p>black text with red underline in one element - no wrapper elements here!</p>【讨论】：
作者更新：
此答案已过时，因为大多数现代浏览器现在都支持 text-decoration-color。
为了准确复制原生text-decoration:underline 的大小、笔划宽度和位置不引入额外的HTML 标记，您应该使用pseudo-element 和em 单位。这允许准确缩放元素和本机行为，而无需额外的标记。
`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;
}`
通过在伪元素上使用 display:table-caption 和 caption-side 并显示 inline-table，我们可以强制浏览器准确地垂直对齐线条和链接，即使在缩放时也是如此。
在这种情况下，我们使用 inline-table 而不是 inline-block 来强制显示伪而不需要指定高度或负值。
JSFIDDLE: https://jsfiddle.net/pohuski/8yfpjuod/8/
CODEPEN: http://codepen.io/pohuski/pen/vEzxPj | (example with scaling)
成功测试：
Internet Explorer：8、9、10、11
火狐：41、40、39、38、37、36
铬：45、44、43、42
野生动物园：8、7、6.2
移动版 Safari：9.0、8.0
安卓浏览器：4.4、2.3
海豚手机：8、11.4
【讨论】：
caption-side 属性的答案，这应该可以解决那些浏览器的怪癖。我更新了 fiddle 和 codepen 链接。
g.
没有。您可以做的最好的事情是使用具有不同颜色的border-bottom，但这并不是真的下划线。
【讨论】：
text-decoration: underline red; 答案。
在实践中，如果您使用span 元素而不是font，这是可能的：
<style>
u { color: black; }
.red { color: red }
</style>
<u><span class='red'><br>$username</span></u>
见jsfiddle。似乎适用于 Chrome、Safari、Firefox、IE、Opera（在最新版本的 Win 7 上测试）。
问题中的代码也应该可以工作，但由于某种原因它在 WebKit 浏览器（Chrome、Safari）上不起作用。
CSS spec：“文本装饰所需的颜色必须源自设置了 'text-decoration' 的元素的 'color' 属性值。即使后代元素具有不同的 'color' 值，装饰的颜色也必须保持不变。”
【讨论】：
<u> 已弃用，但您也可以使用其他元素（例如 div 或 span）和 CSS 实现相同的样式。
<u> 在 HTML 4 中已被弃用，但 HTML 5 赋予它普通元素的状态（并且 HTML 5 不使用术语“弃用”；相反，它使用“过时”） . HTML 5 以一种奇怪的方式重新定义了 <u> 的含义，但这是另一回事。关于这个问题，<u> 中唯一重要的是它（默认情况下）导致其内容显示为带下划线。 w3.org/TR/html/textlevel-semantics.html#elementdef-u
我解决这个问题的最简单方法是使用 CSS：
<style>
.redUnderline {
color: #ff0000;
border-bottom: 1px solid #000000;
}
</style>
<span class="redUnderline">$username</span>
此外，对于实际的下划线，如果您的项目是链接，则此方法有效：
<style>
a.blackUnderline {
color: #000000;
text-decoration: underline;
}
.red {
color: #ff0000;
}
</style>
<a href="" class="blackUnderline"><span class="red">$username</span></a>
【讨论】：
您还可以使用 box-shadow 属性来模拟下划线。
这是fiddle。 这个想法是使用两个分层的盒子阴影将线条定位在与下划线相同的位置。
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}<div>
<span>Hover me, i can have many lines</span>
</div>【讨论】：
<u> 已弃用）。
伪元素效果最好。
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。
你不需要任何额外的元素，你可以将它放置在离文本尽可能近或远的地方（边框底部对我来说有点远），如果你的链接位于不同颜色的背景上（例如使用 box-shadow 技巧），并且适用于所有浏览器（目前 text-decoration-color 仅支持 Firefox）。
可能的缺点：链接不能是 position:static，但这在大多数情况下可能不是问题。只需将其设置为相对，一切都很好。
【讨论】：
您可以使用此 CSS 来“模拟”下划线：
text-decoration: none;
border-bottom: 1px solid #000;
【讨论】：
您可以用<a> 包裹您的<span>，并使用这个小JQuery 插件为下划线着色。
您可以通过向插件传递参数来修改颜色。
(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);
然后你写这个来打电话：
$("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>【讨论】：
这里我们可以在文本中创建带有颜色的下划线
<u style="text-decoration-color: red;">The color of the lines should now be red!</u>或
线条的颜色现在应该是红色的！
<h1 style=" text-decoration:underline; text-decoration-color: red;">The color of the lines should now be red!</u>【讨论】：
我认为最简单的方法是在你的 css 中使用：
text-decoration-color: red;
这将改变下划线的颜色，而不会改变文本的颜色。祝你好运！
【讨论】：
border-bottom 的问题是文本和行之间的额外距离。 text-decoration-color 的问题是缺乏浏览器支持。因此，我的解决方案是使用带有线条的背景图像。这支持线条的任何标记、颜色和样式。 top（在我的示例中为 12px）取决于您的文本的 line-height。
u {
text-decoration: none;
background: transparent url(blackline.png) repeat-x 0px 12px;
}
【讨论】：
我遇到的最好的方法是这样的：
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;
}
【讨论】：