html中加个有颜色横线,关于html:更改下划线颜色

我在这里有此代码:

echo"$username";

首先,如您所见,它带有下划线()。 其次,所有文字均为红色。 那么,是否有将文本($ username)留为红色而下划线为黑的情况?

因此,标签。

HTML4不推荐使用

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

因此,您现在可以使用一种颜色的文本和带有文本装饰的下划线-使用另一种颜色...,而无需额外的"换行"元素

p {

text-decoration: underline;

-webkit-text-decoration-color: red; /* safari still uses vendor prefix */

text-decoration-color: red;

}

black text with red underline in one element - no wrapper elements here!

码笔

注意:

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

2)您还可以使用如下所示的text-decoration速记属性:

|| ||

...因此使用text-decoration速记-上面的示例将简单地是:

p {

text-decoration: underline red;

}

p {

text-decoration: underline red;

}

black text with red underline in one element - no wrapper elements here!

这很酷,但是除了缺少支持之外-还有一点更多的控制权-您可以使用border-bottom-bottom来获得更多控制,但是-长时间使用inline-block肯定会破坏魔力...所以这将是最好的解决方案。

它的2016年,仍然缺乏Chrome的支持。叹。

两年后,此属性实际上仍不支持浏览器。请,请参阅下面概述的有关单行下划线的方法。

@JasonS-Chrome现在完全支持此:)

作者更新:

由于大多数现代浏览器现在都支持text-decoration-color,因此该答案已过时。

:pseudo + em

为了准确地复制本机text-decoration:underline的大小,笔划宽度和位置,而不引入额外的HTML标记,您应该使用pseudo-element和em单位。这允许在没有附加标记的情况下元素的精确缩放和本机行为。

的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

铬:45、44、43、42

Safari:8、7、6.2

移动Safari:9.0、8.0

Android浏览器:4.4、2.3

海豚行动电话:8、11.4

+1用于伪元素,它提供了纯CSS方法,可以很好地控制下划线的属性

很棒的解决方案,但我只能让它在Chrome中看起来不错,是否也可以在其他浏览器中使用?它在Firefox中完全损坏。

@RichardB我已经更新了答案以使用caption-side属性,该属性应说明那些浏览器的怪癖。我更新了小提琴和Codepen链接。

多行文本/链接的行为与文本装饰不同。最好再使用一个元素/跨度。

这不适用于包裹在多行上的元素,或者如果您有1行元素可以按比例缩小并包裹在移动设备上。如果您在测试中添加了足够的内容,它们将中断。

除了已经说过的内容外,这还会用下划线字母(例如g。

实际上,如果使用span元素而不是font,则是可能的:

u { color: black; }

.red { color: red }

$username

参见jsfiddle。似乎可以在Chrome,Safari,Firefox,IE,Opera上运行(已在Win 7上进行了最新版本的测试)。

问题中的代码也应该起作用,但是由于某种原因在WebKit浏览器(Chrome,Safari)上不起作用。

根据CSS规范:"文本修饰所需的颜色必须从设置了"文本装饰"的元素的"颜色"属性值中得出。即使后代元素的"颜色"值不同,装饰的颜色也必须保持相同。"

当今读者注意事项:不建议使用,但您也可以使用其他元素(例如div或span)和CSS来实现相同的样式。

HTML 4中不推荐使用,但是HTML 5为它提供了普通元素的状态(HTML 5不使用"不赞成"一词;而是使用了"过时")。 HTML 5以一种怪异的方式重新定义了的含义,但这是另一回事。关于此问题,中唯一重要的是它(默认情况下)导致其内容显示为下划线。 w3.org/TR/html/textlevel-semantics.html#elementdef-u

不能。您最好的办法是使用具有不同颜色的border-bottom,但这并不是真正的重点。

实际上,这似乎可以正常工作... stackoverflow.com/questions/12804419/

这是错误的;请参阅下面有关text-decoration-color的评论。

CSS 3支持这一点。查看浏览器。 caniuse.com/#feat=文本装饰

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

.redUnderline {

color: #ff0000;

border-bottom: 1px solid #000000;

}

$username

另外,对于实际的下划线,如果您的项目是链接,则可以这样做:

a.blackUnderline {

color: #000000;

text-decoration: underline;

}

.red {

color: #ff0000;

}

$username

您还可以使用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);

}

danield描述的另一种方式是内联显示子容器宽度以及所需的手印颜色。父元素的宽度为文本修饰的宽度,以及所需的下划线颜色。像这样:

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

div span{color:#000;display:inline}

Hover me, i can have many lines

+1这是Jukka在回答中描述的现代版本(已弃用)。

伪元素效果最好。

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。

您不需要任何额外的元素,可以将其放置在离文本尽可能近的位置(根据我的喜好,border-bottom有点远),如果链接结束,则不会显示任何其他颜色可以使用其他颜色的背景(例如使用box-shadow技巧),并且可以在所有浏览器中使用(text-decoration-color到目前为止仅支持Firefox)。

可能的缺点:链接不能处于position:static,但这在大多数时候可能不是问题。只需将其设置为相对,一切都很好。

我认为最简单的方法是在CSS中使用:

text-decoration-color: red;

这将更改下划线的颜色,而不会更改文本的颜色。祝好运!

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

The color of the lines should now be red!

要么

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

The color of the lines should now be red!

您可以用包装并使用此小JQuery插件为下划线着色。

您可以通过将参数传递给插件来修改颜色。

(function ($) {

$.fn.useful = function (params) {

var aCSS = {

'color' : '#d43',

'text-decoration' : 'underline'

};

$.extend(aCSS, params);

this.wrap('');

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('');

this.closest('a').css(aCSS);

};

// Use example:

$("span.name").css(spanCSS).useful({color:'red'});

});

Bob

-

Bali

Dude

-

Los Angeles

Gérard

-

Paris

您可以使用此CSS"模拟"下划线:

text-decoration: none;

border-bottom: 1px solid #000;

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

HTML5:

Initial Colors Different Colors

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;

}

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

u {

text-decoration: none;

background: transparent url(blackline.png) repeat-x 0px 12px;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值