使用CSS,当文本有文本装饰:下划线应用时,是否可以增加文本和下划线之间的距离?
当前回答
如果您正在使用文本装饰:underline;,那么您可以使用text-underline-position: under;在下划线和文本之间添加空格
有关更多的文本下划线位置属性,您可以查看这里
其他回答
我可以使用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>
这是我使用的:
html:
<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>
css:
.horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }
这个问题有一个很简单的答案
text-decoration: underline;
text-underline-offset: 3px;
Text-underline-offset是CSS自己的方法。 这里有更多关于text-underline-offset的内容
不,但是你可以使用border-bottom: 1px solid #000和padding-bottom: 3px。
如果你想要与“下划线”(在我的例子中是边框)相同的颜色,你只需省略颜色声明,即border-bottom-width: 1px和border-bottom-style: solid。
对于多行,您可以将多行文本包装在元素内的span中。例如,<a href="#"><span>插入多行文本在这里</span></a>然后添加border-bottom和padding在<span> - Demo
你可以使用:
text-underline-position: under;
text-underline-offset: {value(px)};
这个属性会根据你提供的offset值来移动链接下面的下划线。
如需更多参考资料,请访问: textunderlineoffest | developer.mozilla.org