改变下划线颜色

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>

Codepen

注意:

1)浏览器支持目前仅限于Firefox和Chrome(V57完全支持)和Safari

2)您还可以使用文本装饰速记属性,如下所示:

<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标记,您应该使用with 单位.这允许精确缩放元素和本机行为,而无需额外的标记. 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伪元素和显示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
Dolphin Mobile: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规范:"文本修饰所需的颜色必须来自设置'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>