使用CSS,在text-decoration:underline应用文本时,是否可以增加文本与下划线之间的距离？
没有,但你可能会喜欢的东西去border-bottom: 1px solid #000和padding-bottom: 3px.
如果你想要"下划线"的相同颜色(在我的例子中是边框),你只需要省略颜色声明,即border-bottom-width: 1px和border-bottom-style: solid.
对于多行,您可以在元素内的跨度中包装多行文本.例如,insert multiline texts here然后只需添加border-bottom,并padding在- 演示
text-underline-offset直接使用的问题是即使使用text-decoration-width,下划线往往离文本太远而看起来不错.所以我们仍然没有完全控制.
一个为您提供像素精度的解决方案是使用border-bottom伪元素:
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;
}
通过更改padding-bottom: 0属性(负数很好),您可以将下划线准确定位在您想要的位置.
这种技术要注意的一个问题是线条包裹它有点奇怪.
你可以用它 text-underline-position: under
有关更多详细信息,请参见此处:https://css-tricks.com/almanac/properties/t/text-underline-position/
另请参阅浏览器的兼容性.
深入了解视觉风格的细节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与你的背景相同的颜色,使下降器看起来不错.
信用
这是我最初在https://eager.io/app/smartunderline上找到的技术的简化版本,但该文章已被删除.
这对我来说很好。
Google
我知道这是一个老问题,但对于单行文本设置display: inline-block然后设置height已经很好地控制边框和文本之间的距离.
@ last-child的答案是一个很好的答案!
但是,为我的H2添加边框会产生比文本更长的下划线.
如果您正在动态编写CSS,或者如果您喜欢我,那么您很幸运且知道文本是什么,您可以执行以下操作:
改变content到正确长度的东西(即相同的
text)将字体颜色设置为transparent(或rgba(0,0,0,0))
要强调Processing
a {
text-decoration: none;
position: relative;
}
a:after {
content: 'Processing';
color: transparent;
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 