使用CSS,当文本有文本装饰:下划线应用时,是否可以增加文本和下划线之间的距离?
当前回答
这是我使用的:
html:
<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>
css:
.horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }
其他回答
以下是对我很有效的方法。
<风格type = " text / css " > # underline-gap { 文字修饰:下划线; text-underline-position:下; } > < /风格 身体< > < h1 id = " underline-gap " > < a href = " https://Google.com " >谷歌< / > < / h1 > < /身体>
这里有一些很好的解决方案,但每个都有一些问题。每个浏览器的文本下划线偏移量是不同的。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格式,那么它在其他元素上的效果会很好。
不,但是你可以使用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
如果您正在使用文本装饰:underline;,那么您可以使用text-underline-position: under;在下划线和文本之间添加空格
有关更多的文本下划线位置属性,您可以查看这里
你可以使用:
text-underline-position: under;
text-underline-offset: {value(px)};
这个属性会根据你提供的offset值来移动链接下面的下划线。
如需更多参考资料,请访问: textunderlineoffest | developer.mozilla.org