Html 更改下划线颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12557707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Underline color
提问by user1641508
I have this code here:
我在这里有这个代码：
echo "<u><font color='red'><br>$username</font></u>";
Firstly, as you can see, it's underlined (< u >). Second, all text is all red. Well is there anyway to leave the text ($username) red but the underline black?
首先，如您所见，它带有下划线 (< u >)。其次，所有文本都是红色的。那么无论如何将文本 ($username) 保留为红色但下划线为黑色？
采纳答案by Ignacio Vazquez-Abrams
No. The best you can do is to use a border-bottomwith a different color, but that isn't reallyunderlining.
不。您能做的最好的事情是使用border-bottom具有不同颜色的 ，但这并不是真正的下划线。
回答by Danield
There's now a new css3 property for this: text-decoration-color
现在有一个新的 css3 属性：text-decoration-color
So you can now have text in one color and a text-decoration underline - in a different color... without needing an extra 'wrap' element
所以你现在可以有一种颜色的文本和一个文本装饰下划线 - 一种不同的颜色......不需要额外的“换行”元素
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>Codepen
代码笔
NB:
注意：
1) Browser Supportis limited at the moment to Firefox and Chrome (fully supported as of V57) and Safari
1)浏览器支持目前仅限于 Firefox 和 Chrome（从 V57 开始完全支持）和 Safari
2) You could also use the text-decorationshorthand property which looks like this:
2) 您还可以使用如下所示的text-decoration速记属性：
<text-decoration-line> || <text-decoration-style> || <text-decoration-color>
...so using the text-decorationshorthand - the example above would simply be:
...所以使用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>回答by Huski
Update from author:
This answer is outdated since text-decoration-coloris now supported by most modern browsers.
作者更新：
此答案已过时，因为大多数现代浏览器现在都支持text-decoration-color。
:pseudo + em
: 伪 + em
In order to accurately replicate the size, stroke width, and positioning of the native text-decoration:underlinewithout introducing extra HTML markup, you should use a pseudo-elementwith emunits. This allows for accurate scaling of the element and native behavior without additional markup.
为了在不引入额外 HTML 标记的情况下准确复制原生的大小、笔画宽度和位置，您应该使用带单位。这允许在没有额外标记的情况下准确缩放元素和本机行为。
text-decoration:underlinepseudo-elementem
CSS
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;
}`
By using display:table-captionand caption-sideon the pseudo-element and display inline-table, we can force the browser to vertically-align both line and link accurately, even when scaled.
通过使用 display:table-caption以及caption-side伪元素和 display inline-table，我们可以强制浏览器准确地垂直对齐行和链接，即使在缩放时也是如此。
In this instance, we use inline-table instead of inline-block to force the pseudo to display without the need to specify height or negative values.
在这种情况下，我们使用 inline-table 而不是 inline-block 来强制显示伪代码，而无需指定高度或负值。
Examples
例子
JSFIDDLE: https://jsfiddle.net/pohuski/8yfpjuod/8/
CODEPEN: http://codepen.io/pohuski/pen/vEzxPj | (example with scaling)
JSFIDDLE：https: //jsfiddle.net/pohuski/8yfpjuod/8/ CODEPEN：http :
//codepen.io/pohuski/pen/vEzxPj| （缩放示例）
Successfully Tested On:
Internet Explorer: 8, 9, 10, 11
Firefox: 41, 40, 39, 38, 37, 36
Chrome: 45, 44, 43, 42
Safari: 8, 7, 6.2
Mobile Safari: 9.0, 8.0
Android Browser: 4.4, 2.3
Dolphin Mobile: 8, 11.4
成功测试：
Internet Explorer：
8、9、10、11 Firefox：41、40、39、38、37、36
Chrome：45、44、43、42
Safari：8、7、6.2
Mobile Safari：9.0、8.0
Android浏览器：4.4、2.3
海豚手机：8、11.4
回答by Jukka K. Korpela
In practice, it is possible, if you use spanelement instead of font:
实际上，如果您使用spanelement 而不是，则是可能的font：
<style>
u { color: black; }
.red { color: red }
</style>
<u><span class='red'><br>$username</span></u>
See jsfiddle. Appears to work on Chrome, Safari, Firefox, IE, Opera (tested on Win 7 with newest versions).
请参阅jsfiddle。似乎适用于 Chrome、Safari、Firefox、IE、Opera（在最新版本的 Win 7 上测试）。
The code in the question should work, too, but it does not work for some reason on WebKit browsers (Chrome, Safari).
问题中的代码也应该有效，但由于某种原因它在 WebKit 浏览器（Chrome、Safari）上不起作用。
By the CSS spec: “The color(s) required for the text decoration must be derived from the 'color' property value of the element on which 'text-decoration' is set. The color of decorations must remain the same even if descendant elements have different 'color' values.”
根据CSS 规范：“文本装饰所需的颜色必须源自设置了 'text-decoration' 的元素的 'color' 属性值。即使后代元素具有不同的“颜色”值，装饰的颜色也必须保持不变。”
回答by AE Grey
The easiest way I've tackled this is with CSS:
我解决这个问题的最简单方法是使用 CSS：
<style>
.redUnderline {
color: #ff0000;
border-bottom: 1px solid #000000;
}
</style>
<span class="redUnderline">$username</span>
Also, for an actual underline, if your item is a link, this works:
此外，对于实际的下划线，如果您的项目是链接，则此方法有效：
<style>
a.blackUnderline {
color: #000000;
text-decoration: underline;
}
.red {
color: #ff0000;
}
</style>
<a href="" class="blackUnderline"><span class="red">$username</span></a>
回答by Berry Blue
You can also use the box-shadow property to simulate an underline.
您还可以使用 box-shadow 属性来模拟下划线。
Here is a fiddle. The idea is to use two layered box shadows to position the line in the same place as an underline.
这是一个小提琴。这个想法是使用两个分层的框阴影将线条定位在与下划线相同的位置。
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);
}
回答by Samuel Tesler
Another way that the one described by danield is to have a child container width display inline, and the tipography color you want. The parent element width the text-decoration, and the color of underline you want. Like this:
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>回答by Johnny5k
A pseudo element works best.
伪元素效果最好。
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;
}
See jsfiddle.
请参阅jsfiddle。
You don't need any extra elements, you can position it as close or far as you want from the text (border-bottom is kinda far for my liking), there aren't any extra colors that show up if your link is over a different colored background (like with the box-shadow trick), and it works in all browsers (text-decoration-color only supports Firefox as of yet).
你不需要任何额外的元素，你可以将它放置在你想要的离文本近或远的地方（我喜欢边框底部有点远），如果你的链接结束，则不会显示任何额外的颜色不同颜色的背景（就像 box-shadow 技巧一样），它适用于所有浏览器（text-decoration-color 目前仅支持 Firefox）。
Possible downside: The link can't be position:static, but that's probably not a problem the vast majority of the time. Just set it to relative and all is good.
可能的缺点：链接不能是 position:static，但大多数情况下这可能不是问题。只需将其设置为相对，一切都很好。
回答by Gung Foo
You can use this CSS to "simulate" an underline:
您可以使用此 CSS 来“模拟”下划线：
text-decoration: none;
border-bottom: 1px solid #000;
回答by Tristan C
You can wrap your <span>with a <a>and use this little JQuery plugin to color the underline.
You can modify the color by passing a parameter to the plugin.
你可以<span>用 a包裹你，<a>并使用这个小 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);
Then you call by writing this :
然后你通过写这个来调用：
$("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>