html中加个有颜色横线,关于html：更改下划线颜色

我在这里有此代码：

echo"$username";

首先，如您所见，它带有下划线()。 其次，所有文字均为红色。 那么，是否有将文本($ username)留为红色而下划线为黑的情况？

因此，标签。

HTML4不推荐使用

现在有一个新的css3属性：text-decoration-color

因此，您现在可以使用一种颜色的文本和带有文本装饰的下划线-使用另一种颜色...，而无需额外的"换行"元素

p {

text-decoration: underline;

-webkit-text-decoration-color: red; /* safari still uses vendor prefix */

text-decoration-color: red;

}

black text with red underline in one element - no wrapper elements here!

码笔

注意：

1)目前，浏览器支持仅限于Firefox和Chrome(自V57起已完全受支持)和Safari

2)您还可以使用如下所示的text-decoration速记属性：

|| ||

...因此使用text-decoration速记-上面的示例将简单地是：

p {

text-decoration: underline red;

}

p {

text-decoration: underline red;

}

black text with red underline in one element - no wrapper elements here!

这很酷，但是除了缺少支持之外-还有一点更多的控制权-您可以使用border-bottom-bottom来获得更多控制，但是-长时间使用inline-block肯定会破坏魔力...所以这将是最好的解决方案。

它的2016年，仍然缺乏Chrome的支持。叹。

两年后，此属性实际上仍不支持浏览器。请，请参阅下面概述的有关单行下划线的方法。

@JasonS-Chrome现在完全支持此:)

作者更新：

由于大多数现代浏览器现在都支持text-decoration-color，因此该答案已过时。

：pseudo + em

为了准确地复制本机text-decoration:underline的大小，笔划宽度和位置，而不引入额外的HTML标记，您应该使用pseudo-element和em单位。这允许在没有附加标记的情况下元素的精确缩放和本机行为。

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

}`

通过在伪元素上使用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 | (例如缩放比例)

已成功测试：

Internet Explorer：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

Android浏览器：4.4、2.3

海豚行动电话：8、11.4

+1用于伪元素，它提供了纯CSS方法，可以很好地控制下划线的属性

很棒的解决方案，但我只能让它在Chrome中看起来不错，是否也可以在其他浏览器中使用？它在Firefox中完全损坏。

@RichardB我已经更新了答案以使用caption-side属性，该属性应说明那些浏览器的怪癖。我更新了小提琴和Codepen链接。

多行文本/链接的行为与文本装饰不同。最好再使用一个元素/跨度。

这不适用于包裹在多行上的元素，或者如果您有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;

}