使用CSS，当文本有文本装饰:下划线应用时，是否可以增加文本和下划线之间的距离?
当前回答
进入文本装饰:下划线的视觉风格的细节几乎是徒劳的，所以你将不得不使用某种hack删除文本装饰:下划线，并替换为其他东西，直到一个神奇的遥远的未来版本的CSS给我们更多的控制。
这招对我很管用:
a { 背景图像：线性渐变（ 180度， 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） ); 文字装饰：无; } <</a>a href=“#”>Lorem ipsum dolor sit amet， <a href=“#”>consetetur sadipscing elitr， sed diam nonumy eirmod tempor <a href=“#”></a>invidunt ut labore.</a>
调整%值(81%和85%)以更改行与文本的距离 调整两个%值之间的差异来改变线条粗细 调整颜色值(#222222)来改变下划线的颜色 使用多行内联元素 具备任何工作背景
下面是一个带有所有专有属性的版本，以实现向后兼容性:
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;
}
更新:SASSY版本
我为此做了一个scss mixin。如果你不使用SASS，上面的常规版本仍然工作得很好…
@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;
}
然后像这样使用它:
$blue = #0054a6;
a {
color: $blue;
@include fake-underline(lighten($blue,20%));
}
a.thick {
color: $blue;
@include fake-underline(lighten($blue,40%), 86%, 99%);
}
更新2:下降提示
如果你有一个纯色的背景色，试着添加一个与背景颜色相同的细文字描边或文字阴影，让下移看起来更好看。
信贷
这是我最初在https://eager.io/app/smartunderline上发现的技术的简化版本，但这篇文章已经被撤下了。
其他回答
您可以使用这个文本-下划线-位置:下面
详情请点击这里:https://css-tricks.com/almanac/properties/t/text-underline-position/
请参见浏览器兼容性。
进入文本装饰:下划线的视觉风格的细节几乎是徒劳的，所以你将不得不使用某种hack删除文本装饰:下划线，并替换为其他东西，直到一个神奇的遥远的未来版本的CSS给我们更多的控制。
这招对我很管用:
a { 背景图像：线性渐变（ 180度， 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） ); 文字装饰：无; } <</a>a href=“#”>Lorem ipsum dolor sit amet， <a href=“#”>consetetur sadipscing elitr， sed diam nonumy eirmod tempor <a href=“#”></a>invidunt ut labore.</a>
调整%值(81%和85%)以更改行与文本的距离 调整两个%值之间的差异来改变线条粗细 调整颜色值(#222222)来改变下划线的颜色 使用多行内联元素 具备任何工作背景
下面是一个带有所有专有属性的版本，以实现向后兼容性:
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;
}
更新:SASSY版本
我为此做了一个scss mixin。如果你不使用SASS，上面的常规版本仍然工作得很好…
@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;
}
然后像这样使用它:
$blue = #0054a6;
a {
color: $blue;
@include fake-underline(lighten($blue,20%));
}
a.thick {
color: $blue;
@include fake-underline(lighten($blue,40%), 86%, 99%);
}
更新2:下降提示
如果你有一个纯色的背景色，试着添加一个与背景颜色相同的细文字描边或文字阴影，让下移看起来更好看。
信贷
这是我最初在https://eager.io/app/smartunderline上发现的技术的简化版本，但这篇文章已经被撤下了。
我知道这是一个老问题，但对于单行文本设置显示:内联块，然后设置高度，这对我来说很好地控制了边框和文本之间的距离。
2021年更新: text-underline-offset现在几乎适用于所有主流和最新版本的浏览器(IE11不支持):https://caniuse.com/?search=text-underline-offset
2019年更新:CSS工作组发布了文本装饰等级4的草案，该草案将添加一个新的属性text-underline-offset(以及text-decoration-thickness)，以控制下划线的确切位置。在撰写本文时，它还是一个早期的草案，还没有被任何浏览器实现，但看起来它最终会使下面的技术过时。
原始答案如下。
直接使用border-bottom的问题是，即使使用padding-bottom: 0，下划线往往离文本太远而不好看。所以我们仍然没有完全控制。
提供像素精度的一个解决方案是使用:after伪元素:
a {
text-decoration: none;
position: relative;
}
a:after {
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
通过更改bottom属性(负数也可以)，您可以将下划线精确地放置在您想要的位置。
使用这种技术需要注意的一个问题是，它在行换行时表现得有点奇怪。
这里有一些很好的解决方案，但每个都有一些问题。每个浏览器的文本下划线偏移量是不同的。squarecandy的答案也可以，但有点复杂。使用border-bottom可以改变文本的布局，并将内容移过来。
添加自定义下划线的一种解决方案是使下划线成为背景图像，其大小与文本大小相关。
a {
/* Change the source image to account for changes to the text colour. It should be a single column. */
background-image: url(data:image/png;base64,iVBORw__EDITED_OUT___0KGgYII=);
/*background-image: url('underlineImage.png');*/
background-size: 1px 1.1em;
background-repeat: repeat-x;
display: inline;
cursor: pointer;
text-decoration: none;
}
随着文本的增加，位置保持相对于文本大小。有了这个，你可以有任何你想要的下划线图像，如“一排星星”，或只是一条线。
上面的示例不包括创建效果所需的完整base64信息。这在所有浏览器上都能很好地工作，因为这是一个基本的东西，并且与旧的浏览器非常兼容。
<a href="#">This _____ is the link</a>
如果背景图片是带有透明度的png格式，那么它在其他元素上的效果会很好。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
- 我怎么能检查html元素，从DOM消失失去焦点?
- 谷歌Chrome表单自动填充和它的黄色背景
