Html 更改下划线颜色

我这里有这个代码：

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

echo“
$username”；

---

首先，如您所见，它带有下划线（）。第二，所有文本都是红色的。还有什么方法可以让文本（$username）保持红色，而下划线保持黑色呢？

没有。最好的方法是使用不同颜色的

边框底部，但这不是真正的下划线。
我解决这一问题的最简单方法是使用CSS：

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


.redUnderline{
颜色：#ff0000；
边框底部：1px实心#000000；
}
$username

此外，对于实际下划线，如果项目是链接，则以下操作有效：

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


a、 黑色下划线{
颜色：#000000；
文字装饰：下划线；
}
瑞德先生{
颜色：#ff0000；
}
您可以使用此CSS“模拟”下划线：

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

实际上，如果使用
span
元素而不是
font
，则有可能：

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


u{颜色：黑色；}
.red{color:red}

$username

看。在Chrome、Safari、Firefox、IE、Opera（最新版本在Win7上测试）上运行

问题中的代码也应该可以工作，但由于某些原因，它在WebKit浏览器（Chrome、Safari）上无法工作

通过：“文本装饰所需的颜色必须来自设置了“文本装饰”的元素的“颜色”属性值。即使后代元素具有不同的“颜色”值，装饰的颜色也必须保持不变。”
现在有一个新的css3属性用于此：

所以你现在可以有一种颜色的文本和一个不同颜色的文本装饰下划线。。。不需要额外的“包装”元素


p{
文字装饰：下划线；
-webkit文本装饰颜色：红色；/*safari仍使用供应商前缀*/
文字装饰颜色：红色；
}
一个元素中带有红色下划线的黑色文本-此处没有包装器元素
 
您还可以使用方框阴影属性模拟下划线

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

这是一本书。
其思想是使用两层框阴影将线条定位在与下划线相同的位置

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

伪元素效果最好

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

看

你不需要任何额外的元素，你可以把它放在离文本尽可能近或远的地方（我喜欢的是边框底部有点远），如果你的链接在不同颜色的背景上，就不会显示任何额外的颜色（比如框阴影），而且它适用于所有浏览器（到目前为止，文本装饰颜色仅支持Firefox）

可能的缺点：链接不能是position:static，但在大多数情况下这可能不是问题。只需将其设置为relative，一切都很好。
danield描述的另一种方法是将子容器宽度内联显示，并使用所需的tipography颜色。父元素宽度文本装饰，一个指定所需下划线的颜色。如下所示：


div{文本装饰：下划线；颜色：#ff0000；显示：内联块；宽度：50px}
div span{color:#000；display:inline}

悬停我，我可以有很多线
作者更新：

这个答案已经过时，因为现在大多数现代浏览器都支持它。



：pseudo+em
为了准确复制本机的大小、笔划宽度和位置，而不引入额外的HTML标记，您应该使用带单位的。这允许在不添加额外标记的情况下准确缩放元素和本机行为。



CSS
通过使用display：和伪元素和display，我们可以强制浏览器精确地垂直对齐直线和链接，即使在缩放时也是如此

在本例中，我们使用内联表而不是内联块来强制显示伪值，而无需指定高度或负值。



例子



已在上成功测试：

Internet Explorer:8、9、10、11

Firefox:41、40、39、38、37、36

铬：45,44,43,42

狩猎：8、7、6.2
移动狩猎：9.0、8.0

Android浏览器：4.4、2.3

Dolphin Mobile:8,11.4
边框底部的问题是文本和线条之间的额外距离。
文本装饰颜色的问题是缺少浏览器支持。因此，我的解决方案是使用带有线条的背景图像。这支持线条的任何标记、颜色和样式。
顶部（在我的示例中为12px）取决于文本的
行高

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

你可以用
包装你的
，并使用这个小小的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);


$（函数（）{
var spanCSS={
“颜色”：“000”，
“文本装饰”：“无”
};
$.fn.usiver=函数（参数）{
var aCSS={
“颜色”：“d43”，
“文本装饰”：“下划线”
};
$.extend（aCSS，params）；
这个。包装（“”）；
这个.closest（'a'）.css（aCSS）；
};
//使用示例：
$（“span.name”）.css（spanCSS）.usive（{color:'red'}）；
})；

上下快速移动
-
巴厘岛
伙计
-
洛杉矶
杰拉德
-
巴黎
在这里，我们可以在文本中创建带颜色的下划线


行的颜色现在应该是红色！
我认为最简单的方法是在css中，使用：

text-decoration-color: red;

这将在不改变文本颜色的情况下更改下划线的颜色。祝您好运！
我遇到的最佳做法如下：

HTML5：

初始颜色不同的颜色


CSS3：

p{
颜色：#000000；
文字装饰线：下划线；
文字装饰颜色：#a11015；
}
p#新颜色{
颜色：#a11015；
文字装饰线：下划线；
文字装饰颜色：#00
text-decoration-color: red;