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


当前回答

你可以使用:

text-underline-position: under;

text-underline-offset: {value(px)};

这个属性会根据你提供的offset值来移动链接下面的下划线。

如需更多参考资料,请访问: textunderlineoffest | developer.mozilla.org

其他回答

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

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

不,但是你可以使用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

如果你想:

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

下划线,你可以使用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>