html - 更改下划线颜色

Question

我在这里有这段代码：

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

首先，如您所见，它带有下划线（< u >）。其次，所有文字都是红色的。那么有没有让文本 ($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>

密码笔

注意：

1)浏览器支持目前仅限于 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

为了在不引入额外 HTML 标记的情况下准确复制原生的大小、笔画宽度和位置，您应该使用带有单位的 a。这允许准确缩放元素和本机行为，而无需额外的标记。 text-decoration:underline pseudo-elementem

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在伪元素和 display 上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
Chrome：45、44、43、42
Safari：8、7、6.2
Mobile Safari：9.0、8.0
Android浏览器：4.4、2.3
海豚手机：8、11.4

Answer 3

不，你能做的最好的就是使用border-bottom不同颜色的 a，但这并不是真正的下划线。

Answer 4

在实践中，如果您使用spanelement 而不是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 规范：“文本装饰所需的颜色必须源自设置了 'text-decoration' 的元素的 'color' 属性值。即使后代元素具有不同的 'color' 值，装饰的颜色也必须保持不变。”</p>

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 属性来模拟下划线。

这是一个小提琴。这个想法是使用两个分层的框阴影将线条定位在与下划线相同的位置。

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 描述的另一种方法是内联显示子容器宽度，以及您想要的笔尖颜色。父元素宽度文本装饰，以及您想要的下划线颜色。像这样：

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>

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。

你不需要任何额外的元素，你可以将它放置在离文本尽可能近或远的地方（边框底部对我来说有点远），如果你的链接结束，则不会显示任何额外的颜色不同颜色的背景（如 box-shadow 技巧），它适用于所有浏览器（text-decoration-color 目前仅支持 Firefox）。

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

Answer 9

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

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

Answer 10

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

text-decoration-color: red;

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

Answer 11

在这里，我们可以在文本中创建带有颜色的下划线

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

或者

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

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

Answer 12

你可以用 a 包装你<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 13

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

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

Answer 14

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

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