html怎么添加文字和下划线,如何增加CSS中文本和下划线之间的差距

squarecandy..

11

深入了解视觉风格的细节text-decoration:underline几乎是徒劳的,所以你将不得不采用某种方式去除删除text-decoration:underline并用其他内容替换它,直到一个神奇的远期未来版本的CSS给我们更多的控制权.

这对我有用:

a {

background-image: linear-gradient(

180deg, rgba(0,0,0,0),

rgba(0,0,0,0) 81%,

#222222 81.1%,

#222222 85%,

rgba(0,0,0,0) 85.1%,

rgba(0,0,0,0)

);

text-decoration: none;

}

调整%值(81%和85%)以更改行与文本的距离

调整两个%值之间的差异以更改线条粗细

调整颜色值(#222222)以更改下划线颜色

适用于多行内联元素

适用于任何背景

这是一个具有所有专有属性的版本,具有一些向后兼容性:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

更新:SASSY版本

我为此做了一个scss mixin.如果您不使用SASS,上面的常规版本仍然很好...

a {

/* This code generated from: http://colorzilla.com/gradient-editor/ */

background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

text-decoration: none;

}

然后像这样使用它:

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {

background-image: linear-gradient(

180deg, rgba(0,0,0,0),

rgba(0,0,0,0) $top,

$color $top + 0.1%,

$color $bottom,

rgba(0,0,0,0) $bottom + 0.1%,

rgba(0,0,0,0)

);

text-decoration: none;

}

更新2:下降提示

如果你有一个坚实的背景颜色,尝试添加一个薄text-stroke或text-shadow与你的背景相同的颜色,使下降器看起来不错.

信用