使用CSS,当文本有文本装饰:下划线应用时,是否可以增加文本和下划线之间的距离?


当前回答

我用什么:

<span style="border-bottom: 1px solid black"> Enter text here </span>

其他回答

Use

{
   text-decoration: underline;
   text-underline-offset: 2px;
}

Here, text-underline-offset: 2px;  is used to define the distance of the underline from the text, where "2px" is the distance.

Note: text-underline-offset: 2px;  can only be used after 
                  text-decoration: underline;

You can also change the thickness of underline by writing
                   text-decoration: underline 5px;
where "5px" is the thickness.
      

进一步查询请参考此链接:https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

您可以使用这个文本-下划线-位置:下面

详情请点击这里:https://css-tricks.com/almanac/properties/t/text-underline-position/

请参见浏览器兼容性。

以下是对我很有效的方法。

<风格type = " text / css " > # underline-gap { 文字修饰:下划线; text-underline-position:下; } > < /风格 身体< > < h1 id = " underline-gap " > < a href = " https://Google.com " >谷歌< / > < / h1 > < /身体>

如果你想:

多行 虚线 自定义底部填充 没有包装

下划线,你可以使用1像素高度的背景图像重复x和100% 100%的位置:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

你可以用px或em之类的东西替换第二个100%来调整下划线的垂直位置。如果你想添加垂直填充,你也可以使用calc,例如:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

当然,你也可以用另一种颜色、高度和设计制作你自己的base64 png图案,例如:http://www.patternify.com/ -只需设置正方形宽度和高度为2x1。

灵感来源:http://alistapart.com/article/customunderlines

我用什么:

<span style="border-bottom: 1px solid black"> Enter text here </span>