使用CSS,在text-decoration:underline应用文本时,是否可以增加文本与下划线之间的距离？
che*_*rtz 322
没有,但你可能会喜欢的东西去border-bottom: 1px solid #000和padding-bottom: 3px.
如果你想要"下划线"的相同颜色(在我的例子中是边框),你只需要省略颜色声明,即border-bottom-width: 1px和border-bottom-style: solid.
对于多行,您可以在元素内的跨度中包装多行文本.例如,<a href="#"><span>insert multiline texts here</span></a>然后只需添加border-bottom,并padding在<span>- 演示
las*_*ild 118
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属性(负数很好),您可以将下划线准确定位在您想要的位置.
这种技术要注意的一个问题是线条包裹它有点奇怪.
小智 67
你可以用它 text-underline-position: under
有关更多详细信息,请参见此处:https://css-tricks.com/almanac/properties/t/text-underline-position/
另请参阅浏览器的兼容性.
小智 22
只是使用
{
text-decoration-line: underline;
text-underline-offset: 2px;
}
小智 12
对此有一个简单的答案：
text-decoration: underline;
text-underline-offset: 3px;
text-underline-offset是css它自己的方法。这里有更多关于text-underline-offset
squ*_*ndy 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;
}这是一个具有所有专有属性的版本,具有一些向后兼容性:
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>更新: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上找到的技术的简化版本,但该文章已被删除.
这对我来说很好。
<style type="text/css">
#underline-gap {
text-decoration: underline;
text-underline-position: under;
}
</style>
<body>
<h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>@ last-child的答案是一个很好的答案!
但是,为我的H2添加边框会产生比文本更长的下划线.
如果您正在动态编写CSS,或者如果您喜欢我,那么您很幸运且知道文本是什么,您可以执行以下操作:
改变content到正确长度的东西(即相同的
text)将字体颜色设置为transparent(或rgba(0,0,0,0))
要强调<h2>Processing</h2>(例如),将last-child的代码更改为:
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;
}
| 归档时间： |
|
| 查看次数： |
294052 次 |
| 最近记录： |