使用CSS,当文本有文本装饰:下划线应用时,是否可以增加文本和下划线之间的距离?
当前回答
看我的小提琴。
你需要使用border width属性和padding属性。我添加了一些动画,让它看起来更酷:
身体{ background - color: lightgreen; } 一个{ 文字修饰:没有; 颜色:绿色; 边框样式:固体; 边框宽度:0px 0px 1px 0px; 过渡:所有。2s轻松; } 答:{徘徊 颜色:darkblue; 边框样式:固体; 边框宽度:0px 0px 1px 0px; 填充:2 px; } <a href='#' >某处…在彩虹之上(lalala)</a>,蓝色的鸟儿,飞…(推特推特!),我想知道(嗯)什么a < I ><a href="#">多么美妙的世界!< / >世界!< / i >
其他回答
您可以使用这个文本-下划线-位置:下面
详情请点击这里:https://css-tricks.com/almanac/properties/t/text-underline-position/
请参见浏览器兼容性。
@last-child的回答很棒!
然而,给我的H2添加边框会产生一个比文本更长的下划线。
如果你正在动态编写CSS,或者如果你像我一样幸运,知道文本将是什么,你可以这样做:
把内容修改成合适的长度 Text)设置字体颜色为透明(或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;
}
这是我使用的:
html:
<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>
css:
.horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }
我可以使用U(下划线标签)
u {
text-decoration: none;
position: relative;
}
u:after {
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
<a href="" style="text-decoration:none">
<div style="text-align: right; color: Red;">
<u> Shop Now</u>
</div>
</a>
作为多行文本或链接的替代方案,您可以将文本包装在块元素中的span中。
<a href="#">
<span>insert multiline texts here</span>
</a>
然后你可以在<span>上添加border-bottom和padding。
a {
width: 300px;
display: block;
}
span {
padding-bottom: 10px;
border-bottom: 1px solid #0099d3;
line-height: 48px;
}
你可以参考这把小提琴。https://jsfiddle.net/Aishaterr/vrpb2ey7/2/