blocks|key|4618245|text|不是的。你能做的最好的事情就是使用不同颜色的border-bottom，但这并不是真正的下划线。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4618246|entityMap^0|M|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>No. The best you can do is to use a <code>border-bottom</code> with a different color, but that isn't <em>really</em> underlining.</p>


blocks|key|2978553|text|我解决这个问题的最简单的方法是使用CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2978554|<style>
.redUnderline+{
++++color:+#ff0000;
++++border-bottom:+1px+solid+#000000;
}
</style>
<span+class="redUnderline">$username</span>|code-block|syntax|javascript|2978555|此外，对于实际的下划线，如果你的项目是一个链接，这是可行的：|2978556|<style>
a.blackUnderline+{
+++color:+#000000;
+++text-decoration:+underline;
}
.red+{
++++color:+#ff0000;
}
</style>
<a+href=""+class="blackUnderline"><span+class="red">$username</span></a>|2978557|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>The easiest way I've tackled this is with CSS:</p>

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

<p>Also, for an actual underline, if your item is a link, this works:</p>

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


blocks|key|4708233|text|您可以使用此CSS来“模拟”下划线：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4708234|text-decoration:+none;
border-bottom:+1px+solid+#000;|code-block|syntax|javascript|4708235|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use this CSS to "simulate" an underline:</p>

<pre><code>text-decoration: none;
border-bottom: 1px solid #000;
</code></pre>


blocks|key|2978598|text|在实践中，如果您使用span元素而不是font，这是可以实现的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2978599|<style>
u+{+color:+black;+}
.red+{+color:+red+}
</style>
<u><span+class='red'><br>$username</span></u>|code-block|syntax|javascript|2978600|参见jsfiddle。似乎可以在Chrome，Safari，Firefox，IE，Opera上工作(在最新版本的Win+7上测试)。|2978601|问题中的代码也应该可以工作，但由于某种原因，它不能在WebKit浏览器(Chrome，Safari)上工作。|2978602|通过CSS+spec：“文本装饰所需的颜色必须从其上设置了‘文本装饰’的元素的'color‘属性值中导出。即使后代元素有不同的'+color‘值，装饰的颜色也必须保持不变。“|2978603|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/yucca42/VHRzU/|1|http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration^0|A|4|J|4|0|0|2|8|0|0|0|2|8|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

<p>In practice, it is possible, if you use <code>span</code> element instead of <code>font</code>:</p>

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

<p>See <a href="http://jsfiddle.net/yucca42/VHRzU/" rel="noreferrer">jsfiddle</a>. Appears to work on Chrome, Safari, Firefox, IE, Opera (tested on Win 7 with newest versions). </p>

<p>The code in the question should work, too, but it does not work for some reason on WebKit browsers (Chrome, Safari).</p>

<p>By the <a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration" rel="noreferrer">CSS spec</a>: “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.”</p>


blocks|key|2978678|text|现在有了一个新的css3属性：text-decoration-color|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2978679|所以你现在可以有一种颜色的文本和一种不同颜色的文本装饰下划线...不需要额外的'wrap‘元素|2978680|​|2978681|p+{
++text-decoration:+underline;
++-webkit-text-decoration-color:+red;+/*+safari+still+uses+vendor+prefix+*/
++text-decoration-color:+red;
}|code-block|syntax|javascript|2978682|<p>black+text+with+red+underline+in+one+element+-+no+wrapper+elements+here!</p>|2978683|2978684|Codepen|2978685|NB:|style|BOLD|2978686|1)+Browser+Support目前仅限于火狐和Chrome+(从V57开始完全支持)和Safari|2978687|2)您还可以使用text-decoration速记属性，如下所示：|2978688|<text-decoration-line>+%7C%7C+<text-decoration-style>+%7C%7C+<text-decoration-color>|2978689|使用text-decoration速记的...so+-上面的例子很简单：|CODE|2978690|p+{
++text-decoration:+underline+red;
}|2978691|2978692|p+{
++text-decoration:+underline+red;
}|2978693|<p>black+text+with+red+underline+in+one+element+-+no+wrapper+elements+here!</p>|2978694|2978695|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property|1|http://codepen.io/danield770/pen/YZaJrE?editors=1100|2|http://caniuse.com/#feat=text-decoration|3|https://www.w3.org/TR/css-text-decor-3/#text-decoration^0|F|L|0|0|0|0|0|0|0|0|7|1|0|0|3|0|3|F|2|0|8|F|3|0|0|2|F|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1Q|8|@]|9|@$A|1R|B|1S|1|1T]]|C|$]]|$1|D|3|E|5|6|7|1U|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1V|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1W|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|1X|8|@]|9|@]|C|$K|L]]|$1|O|3|G|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1Z|8|@]|9|@$A|20|B|21|1|22]]|C|$]]|$1|R|3|S|5|6|7|23|8|@$A|24|B|25|T|U]]|9|@]|C|$]]|$1|V|3|W|5|6|7|26|8|@]|9|@$A|27|B|28|1|29]]|C|$]]|$1|X|3|Y|5|6|7|2A|8|@]|9|@$A|2B|B|2C|1|2D]]|C|$]]|$1|Z|3|10|5|J|7|2E|8|@]|9|@]|C|$K|L]]|$1|11|3|12|5|6|7|2F|8|@$A|2G|B|2H|T|13]]|9|@]|C|$]]|$1|14|3|15|5|J|7|2I|8|@]|9|@]|C|$K|L]]|$1|16|3|G|5|6|7|2J|8|@]|9|@]|C|$]]|$1|17|3|18|5|J|7|2K|8|@]|9|@]|C|$K|L]]|$1|19|3|1A|5|J|7|2L|8|@]|9|@]|C|$K|L]]|$1|1B|3|G|5|6|7|2M|8|@]|9|@]|C|$]]|$1|1C|3|-4|5|6|7|2N|8|@]|9|@]|C|$]]]|1D|$1E|$5|1F|1G|1H|C|$1I|1J]]|1K|$5|1F|1G|1H|C|$1I|1L]]|1M|$5|1F|1G|1H|C|$1I|1N]]|1O|$5|1F|1G|1H|C|$1I|1P]]]]

<p>There's now a new css3 property for this: <a href="http://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property" rel="noreferrer">text-decoration-color</a></p>

<p>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>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;black text with red underline in one element - no wrapper elements here!&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<h2><a href="http://codepen.io/danield770/pen/YZaJrE?editors=1100" rel="noreferrer">Codepen</a></h2>

<p><strong>NB:</strong> </p>

<p>1) <a href="http://caniuse.com/#feat=text-decoration" rel="noreferrer">Browser Support</a> is limited at the moment to Firefox and Chrome (fully supported as of V57) and Safari</p>

<p>2) You could also use the <a href="https://www.w3.org/TR/css-text-decor-3/#text-decoration" rel="noreferrer">text-decoration</a> shorthand property which looks like this:</p>

<pre><code>&lt;text-decoration-line&gt; || &lt;text-decoration-style&gt; || &lt;text-decoration-color&gt;
</code></pre>

<p>...so using the <code>text-decoration</code> shorthand - the example above would simply be:</p>

<pre><code>p {
  text-decoration: underline red;
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>p {
  text-decoration: underline red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;black text with red underline in one element - no wrapper elements here!&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2978715|text|您还可以使用box-shadow属性来模拟下划线。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2978716|这是一个fiddle。这个想法是使用两个分层的方框阴影来将线条定位在与下划线相同的位置。|offset|length|2978717|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);
}|code-block|syntax|javascript|2978718|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/eMWSQ/1/^0|0|4|6|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can also use the box-shadow property to simulate an underline.</p>

<p>Here is a <a href="http://jsfiddle.net/eMWSQ/1/" rel="nofollow">fiddle</a>.
The idea is to use two layered box shadows to position the line in the same place as an underline.</p>

<pre><code>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);
}
</code></pre>


blocks|key|4708432|text|伪元素的效果最好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4708433|a,+a:hover+{
++position:+relative;
++text-decoration:+none;
}
a:after+{
++content:+'';
++display:+block;
++position:+absolute;
++height:+0;
++top:90%25;
++left:+0;
++right:+0;
++border-bottom:+solid+1px+red;
}|code-block|syntax|javascript|4708434|参见jsfiddle。|offset|length|4708435|你不需要任何额外的元素，你可以把它放在离文本很近或很远的地方(边框-底部对我来说有点远)，如果你的链接位于不同颜色的背景上(就像框阴影技巧一样)，就不会有任何额外的颜色显示出来，而且它在所有浏览器中都有效(目前文本装饰颜色还只支持Firefox+)。|4708436|可能的缺点:链接不能是position:static，但在大多数情况下这可能不是问题。只需将其设置为relative，一切都是好的。|4708437|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/6YJHM/^0|0|0|2|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>A pseudo element works best. </p>

<pre><code>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;
}
</code></pre>

<p>See <a href="http://jsfiddle.net/6YJHM/" rel="nofollow">jsfiddle</a>.</p>

<p>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).</p>

<p>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.</p>


blocks|key|2547533|text|danield描述的另一种方法是让子容器宽度内联显示，并显示您想要的标题颜色。父元素的宽度、文本装饰和您想要的下划线的颜色。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2547534|​|2547535|div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div+span{color:#000;display:inline}|code-block|syntax|javascript|2547536|<div>
++<span>Hover+me,+i+can+have+many+lines</span>
</div>|2547537|2547538|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>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:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div span{color:#000;display:inline}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;span&gt;Hover me, i can have many lines&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4708481|text|来自作者的更新：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4708482|此答案已过时，因为大多数现代浏览器现在都支持++。|offset|length|style|BOLD|4708483|4708484|：伪%2B+em|4708485|为了在不引入额外text-decoration:underline标记的情况下准确地复制原生HTML+的大小、笔触宽度和位置，您应该使用具有em单元的pseudo-element。这允许在没有额外标记的情况下精确缩放元素和本机行为。|CODE|4708486|CSS|4708487|`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;
}`|code-block|syntax|javascript|4708488|通过在伪元素和display+inline-table上使用display:table-caption和caption-side，我们可以强制浏览器精确地垂直对齐线条和链接，即使在缩放时也是如此。|4708489|在本例中，我们使用inline-table而不是inline-block来强制显示伪，而不需要指定高度或负值。|4708490|示例|4708491|:+https://jsfiddle.net/pohuski/8yfpjuod/8/|4708492|:+http://codepen.io/pohuski/pen/vEzxPj+%7C+(example+with+scaling)|4708493|在上成功测试|4708494|Internet+Explorer:+8、9、10、11|4708495|火狐:+41，40，39，38，37，36|4708496|铬:+45，44，43，42|4708497|Safari:+8，7，6.2|4708498|移动Safari:+9.0，8.0|4708499|Android浏览器:+4.4，2.3|4708500|海豚移动:+8，11.4|4708501|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration|1|http://www.w3.org/Style/Examples/007/units.en.html|2|https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements|3|https://developer.mozilla.org/en-US/docs/Web/CSS/display|4|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption|5|https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side|6|https://jsfiddle.net/pohuski/8yfpjuod/8/|7|http://codepen.io/pohuski/pen/vEzxPj^0|0|0|M|O|1|0|0|0|8|P|1Y|2|23|E|1F|1T|8|P|0|1Y|2|1|23|E|2|0|0|3|0|0|0|2Q|F|C|12|D|1G|C|F|C|3|12|D|4|1G|C|5|0|0|1J|0|0|2|0|0|16|0|16|6|0|0|1R|0|1R|7|0|0|1|0|0|S|0|0|L|0|0|E|0|0|F|0|0|H|0|0|J|0|0|C|0^^$0|@$1|2|3|4|5|6|7|26|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|27|8|@$D|28|E|29|F|G]|$D|2A|E|2B|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|2D|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|2E|8|@$D|2F|E|2G|F|M]|$D|2H|E|2I|F|M]|$D|2J|E|2K|F|M]|$D|2L|E|2M|F|G]]|9|@$D|2N|E|2O|1|2P]|$D|2Q|E|2R|1|2S]|$D|2T|E|2U|1|2V]]|A|$]]|$1|N|3|O|5|6|7|2W|8|@$D|2X|E|2Y|F|G]]|9|@]|A|$]]|$1|P|3|Q|5|R|7|2Z|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|30|8|@$D|31|E|32|F|G]|$D|33|E|34|F|M]|$D|35|E|36|F|M]|$D|37|E|38|F|M]]|9|@$D|39|E|3A|1|3B]|$D|3C|E|3D|1|3E]|$D|3F|E|3G|1|3H]]|A|$]]|$1|W|3|X|5|6|7|3I|8|@$D|3J|E|3K|F|G]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|3L|8|@$D|3M|E|3N|F|G]]|9|@]|A|$]]|$1|10|3|11|5|6|7|3O|8|@$D|3P|E|3Q|F|G]]|9|@$D|3R|E|3S|1|3T]]|A|$]]|$1|12|3|13|5|6|7|3U|8|@$D|3V|E|3W|F|G]]|9|@$D|3X|E|3Y|1|3Z]]|A|$]]|$1|14|3|15|5|6|7|40|8|@$D|41|E|42|F|G]]|9|@]|A|$]]|$1|16|3|17|5|6|7|43|8|@$D|44|E|45|F|G]]|9|@]|A|$]]|$1|18|3|19|5|6|7|46|8|@$D|47|E|48|F|G]]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|49|8|@$D|4A|E|4B|F|G]]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|4C|8|@$D|4D|E|4E|F|G]]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|4F|8|@$D|4G|E|4H|F|G]]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|4I|8|@$D|4J|E|4K|F|G]]|9|@]|A|$]]|$1|1I|3|1J|5|6|7|4L|8|@$D|4M|E|4N|F|G]]|9|@]|A|$]]|$1|1K|3|-4|5|6|7|4O|8|@]|9|@]|A|$]]]|1L|$1M|$5|1N|1O|1P|A|$1Q|1R]]|1S|$5|1N|1O|1P|A|$1Q|1T]]|1U|$5|1N|1O|1P|A|$1Q|1V]]|1W|$5|1N|1O|1P|A|$1Q|1X]]|1Y|$5|1N|1O|1P|A|$1Q|1Z]]|20|$5|1N|1O|1P|A|$1Q|21]]|22|$5|1N|1O|1P|A|$1Q|23]]|24|$5|1N|1O|1P|A|$1Q|25]]]]

<p>Update from author:
<br><strong>This answer is outdated since <a href="https://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp" rel="nofollow noreferrer" title="text-decoration-color">text-decoration-color</a> is now supported by most modern browsers.</strong>
<br></p>

<hr>

<h2> :pseudo + em</h2>

<p>In order to accurately replicate the size, stroke width, and positioning of the native <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" rel="nofollow noreferrer"><code>text-decoration:underline</code></a> <strong>without introducing extra HTML markup</strong>, you should use a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="nofollow noreferrer"><code>pseudo-element</code></a> with <a href="http://www.w3.org/Style/Examples/007/units.en.html" rel="nofollow noreferrer"><code>em</code></a> units. This allows for accurate scaling of the element and native behavior without additional markup.
<br><br></p>

<h2>CSS</h2>

<pre><code>`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;
}`
</code></pre>

<p>By using display:<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption" rel="nofollow noreferrer"><code>table-caption</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side" rel="nofollow noreferrer"><code>caption-side</code></a> on the pseudo-element and display <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" rel="nofollow noreferrer"><code>inline-table</code></a>, we can force the browser to vertically-align both line and link accurately, even when scaled.</p>

<p>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.
<br><br></p>

<h2>Examples</h2>

<p><a href="https://jsfiddle.net/pohuski/8yfpjuod/8/" rel="nofollow noreferrer"><strong>JSFIDDLE</strong>: https://jsfiddle.net/pohuski/8yfpjuod/8/</a><br>
<a href="http://codepen.io/pohuski/pen/vEzxPj" rel="nofollow noreferrer"><strong>CODEPEN</strong>: http://codepen.io/pohuski/pen/vEzxPj | (example with scaling)</a></p>

<p><strong>Successfully Tested On:</strong><br>
Internet Explorer: 8, 9, 10, 11<br>
Firefox: 41, 40, 39, 38, 37, 36<br>
Chrome: 45, 44, 43, 42<br>
Safari: 8, 7, 6.2<br>
Mobile Safari: 9.0, 8.0<br>
Android Browser: 4.4, 2.3<br>
Dolphin Mobile: 8, 11.4</p>


blocks|key|2549259|text|border-bottom的问题是文本和行之间的额外距离。text-decoration-color的问题是缺乏浏览器支持。因此，我的解决方案是使用带线条的背景图像。它支持线条的任何标记、颜色和样式。top+(在我的例子中是12px)依赖于文本的line-height。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2549260|+u+{
++++text-decoration:+none;
++++background:+transparent+url(blackline.png)+repeat-x+0px+12px;
}|code-block|syntax|javascript|2549261|entityMap^0|0|D|T|L|2S|3|3F|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|L|$]]

<p>Problem with <code>border-bottom</code> is the extra distance between the text and the line. Problem with <code>text-decoration-color</code> is lack of browser support. Therefore my solution is the use of a background-image with a line. This supports any markup, color(s) and style of the line. <code>top</code> (12px in my example) is dependent on <code>line-height</code> of your text.</p>

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


blocks|key|2549263|text|你可以用<a>包装你的<span>，然后用这个小的JQuery插件给下划线上色。您可以通过向插件传递一个参数来修改颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2549264|++++(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);|code-block|syntax|javascript|2549265|然后您可以通过编写以下代码来调用：|2549266|++++$("span.name").useful({color:'red'});|2549267|​|2549268|$(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'});



++++});|2549269|<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>|2549270|2549271|entityMap^0|4|3|B|6|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|15|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|U|3|P|5|6|7|18|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|W|$]]

<p>You can wrap your <code>&lt;span&gt;</code> with a <code>&lt;a&gt;</code> and use this little JQuery plugin to color the underline.
You can modify the color by passing a parameter to the plugin.</p>

<pre><code>    (function ($) {
        $.fn.useful = function (params) {

            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);

            this.wrap('&lt;a&gt;&lt;/a&gt;');
            var element = this.closest('a');
            element.css(aCSS);
            return element;
        };
    })(jQuery);
</code></pre>

<p>Then you call by writing this :</p>

<pre><code>    $("span.name").useful({color:'red'});
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {

        var spanCSS = {
            'color' : '#000',
            'text-decoration': 'none'
        };
        
        $.fn.useful = function (params) {
            
            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);
            this.wrap('&lt;a&gt;&lt;/a&gt;');
            this.closest('a').css(aCSS);
        };

        // Use example:
        $("span.name").css(spanCSS).useful({color:'red'});



    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;section class="container"&gt;

    &lt;div class="user important"&gt;
        &lt;span class="name"&gt;Bob&lt;/span&gt;
        -
        &lt;span class="location"&gt;Bali&lt;/span&gt;
    &lt;/div&gt;

    &lt;div class="user"&gt;
        &lt;span class="name"&gt;Dude&lt;/span&gt;
        -
        &lt;span class="location"&gt;Los Angeles&lt;/span&gt;
    &lt;/div&gt;


    &lt;div class="user"&gt;
        &lt;span class="name"&gt;Gérard&lt;/span&gt;
        -
        &lt;span class="location"&gt;Paris&lt;/span&gt;
    &lt;/div&gt;

&lt;/section&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4708562|text|在这里我们可以用颜色在文本中创建下划线|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4708563|​|4708564|<u+style="text-decoration-color:+red;">The+color+of+the+lines+should+now+be+red!</u>|code-block|syntax|javascript|4708565|4708566|或|4708567|线条的颜色现在应该是红色的！|4708568|4708569|<h1+style="+text-decoration:underline;+text-decoration-color:+red;">The+color+of+the+lines+should+now+be+red!</u>|4708570|4708571|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Y|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

<p>here we can create underline with color in text </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;u style="text-decoration-color: red;"&gt;The color of the lines should now be red!&lt;/u&gt;</code></pre>
</div>
</div>
</p>

<p>or</p>

<p>The color of the lines should now be red!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 style=" text-decoration:underline; text-decoration-color: red;"&gt;The color of the lines should now be red!&lt;/u&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4708593|text|我认为最简单的方法是在你的css中，使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4708594|text-decoration-color:+red;|code-block|syntax|javascript|4708595|这将更改下划线的颜色，而不会更改文本的颜色。祝好运!|4708596|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I think the easiest way to do this is in your css, use:</p>

<pre><code>text-decoration-color: red;
</code></pre>

<p>This will change the color of the underline without changing the color of your text. Good luck!</p>


blocks|key|2979040|text|我遇到的最好的方法是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2979041|HTML5：|2979042|<p>Initial+Colors+<a+id="new-color">Different+Colors</a></p>|code-block|syntax|javascript|2979043|CSS3：|2979044|p+{
++++color:+#000000;
++++text-decoration-line:+underline;
++++text-decoration-color:+#a11015;
}

p+#new-color{
++++color:+#a11015;
++++text-decoration-line:+underline;
++++text-decoration-color:+#000000;
}|2979045|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Best way I came across doing is like this:</p>

<p>HTML5:</p>

<pre class="lang-html prettyprint-override"><code>&lt;p&gt;Initial Colors &lt;a id="new-color"&gt;Different Colors&lt;/a&gt;&lt;/p&gt;
</code></pre>

<p>CSS3:</p>

<pre class="lang-css prettyprint-override"><code>p {
    color: #000000;
    text-decoration-line: underline;
    text-decoration-color: #a11015;
}

p #new-color{
    color: #a11015;
    text-decoration-line: underline;
    text-decoration-color: #000000;
}
</code></pre>


<p>I have this code here:</p>

<pre><code>echo "&lt;u&gt;&lt;font color='red'&gt;&lt;br&gt;$username&lt;/font&gt;&lt;/u&gt;";
</code></pre>

<p>Firstly, as you can see, it's underlined (&lt; u >). Second, all text is all red. Well is there anyway to leave the text ($username) red but the underline black?</p>


Changing Underline color

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在这里有这个代码：echo "<u><font color='red'><br>$username</font></u>";首先，如您所见，它带有下划线(< u >)。其次，所有文本都是红色的。那么，有没有什么办法让文本($username)保持红色，而将下划线留为黑色？

问更改下划线颜色
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改下划线颜色EN