Question

我这里有这个代码：

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

首先，如您所见，它带有下划线（＆lt; u＆gt;）。其次，所有文字都是红色的。那么有没有留下文本（$ username）红色但下划线黑色？

Answer 1

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

所以你现在可以用一种颜色和一个文本装饰下划线 - 用不同的颜色......不需要额外的'换行'元素

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 Support目前仅限于Firefox和Chrome（V57完全支持）和Safari

2）您还可以使用text-decoration简写属性，如下所示：

<text-decoration-line> || <text-decoration-style> || <text-decoration-color>

...所以使用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>

Answer 2

作者更新：
这个答案已过时，因为现在大多数现代浏览器都支持text-decoration-color。

：伪+ em

为了准确复制原生text-decoration:underline 的大小，笔触宽度和位置而不引入额外的HTML标记，您应该使用pseudo-element {{3} }} 单位。这允许精确缩放元素和本机行为，而无需额外的标记。

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

通过在伪元素和em上使用display：table-caption和caption-side，我们可以强制浏览器准确地垂直对齐线条和链接，即使在缩放时也是如此。

在这种情况下，我们使用inline-table而不是inline-block来强制显示伪而无需指定高度或负值。

实施例

inline-table
JSFIDDLE: https://jsfiddle.net/pohuski/8yfpjuod/8/

成功测试：
Internet Explorer：8,9,10,11
Firefox：41,40,39,38,37,36 Chrome：45,44,43,42
Safari：8,7,6.2
移动Safari：9.0,8.0
Android浏览器：4.4,2.3
海豚移动：8,11.4

Answer 3

没有。您可以做的最好的事情是使用不同颜色的border-bottom，但这不是真正下划线。

Answer 4

实际上，如果您使用span元素而不是font，则可能会这样做：

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

见jsfiddle。似乎适用于Chrome，Safari，Firefox，IE，Opera（在最新版本的Win 7上测试过）。

问题中的代码也应该有效，但在WebKit浏览器（Chrome，Safari）上由于某种原因无效。

通过CSS spec：“文本修饰所需的颜色必须从设置了'text-decoration'的元素的'color'属性值派生。即使后代元素具有不同的“颜色”值，装饰的颜色也必须保持不变。“

Answer 5

我解决这个问题的最简单方法是使用CSS：

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

另外，对于实际下划线，如果您的项目是链接，则可以：

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

Answer 6

您还可以使用box-shadow属性来模拟下划线。

这是fiddle。我们的想法是使用两个分层的盒子阴影来将线条定位在与下划线相同的位置。

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

Answer 7

danield描述的另一种方法是让子容器宽度显示为内联，以及您想要的tipography颜色。父元素宽度为文本修饰，以及您想要的下划线颜色。像这样：

＆＃13;

div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div span{color:#000;display:inline}

＆＃13;

<div>
  <span>Hover me, i can have many lines</span>
</div>

＆＃13;

Answer 8

伪元素效果最好。

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。

你不需要任何额外的元素，你可以将它放在尽可能接近或远离文本的位置（边框底部有点像我喜欢的那样），如果你的话，没有任何额外的颜色出现链接在不同颜色的背景上（与盒子阴影技巧一样），并且适用于所有浏览器（text-decoration-color仅支持Firefox）。

可能的缺点：链接不能是位置：静态，但绝大多数情况下这可能不是问题。只需将它设置为相对，一切都很好。

Answer 9

您可以使用此CSS来“模拟”下划线：

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

Answer 10

您可以使用<span>包裹<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);

然后通过写这个来打电话：

    $("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>

Answer 11

这里我们可以在文本中用颜色创建下划线

＆＃13;

<u style="text-decoration-color: red;">The color of the lines should now be red!</u>

＆＃13;

或

线条的颜色现在应该是红色的！

＆＃13;

<h1 style=" text-decoration:underline; text-decoration-color: red;">The color of the lines should now be red!</u>

＆＃13;

Answer 12

我认为最简单的方法是在你的css中使用：

text-decoration-color: red;

这将更改下划线的颜色而不更改文本的颜色。祝你好运！

Answer 13

border-bottom的问题是文本和行之间的额外距离。问题text-decoration-color缺乏浏览器支持。因此我的解决方案是使用带有线条的背景图像。这支持任何标记，颜色和线条样式。 top（在我的示例中为12px）取决于文本的line-height。

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

Answer 14

我遇到的最好的方式是这样的：

HTML5：

<p>Initial Colors <a id="new-color">Different Colors</a></p>

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

改变下划线颜色

14 个答案:

Codepen

：伪+ em

CSS

实施例