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