Question

我正在寻找一种方法来扩大文本与页面下划线之间的距离。我主要使用CSS，但我也必须使用标签，基本上我的问题考虑了两种情况。有没有办法改变这个间距？代码非常简单：

.title_span {
 font-weight: bold;
 text-decoration: underline;
 color: grey;
}

我的另一个可能性是尝试以某种方式使用1px图片的跨度使用背景并对X轴重复我正在寻找更清洁的解决方案。

Answer 1

不是没有技巧，不是。一个简单的解决方案是将文本包装在另一个范围内，并给出一个底部边框。

<span class="underline"><span class="title_span">title of something</span></span>

.title_span {
 font-weight: bold;
 text-decoration: underline;
 color: grey;
}

.underline {
    padding-bottom: 2px;
    border-bottom: grey 1px solid;
}

http://jsfiddle.net/m9RQ9/

Answer 2

我担心这本身不可能，但您可以做的是border-bottom替代background-image

Answer 3

文本之间的间距和下划线为否，但你可以使用像border-bottom这样的东西：1px solid＃000和padding-bottom：3px。

编辑：如果你想要“下划线”的相同颜色（在我的例子中是边框），你只需要省略颜色声明，即border-bottom-width：1px和border-bottom-style：solid

文本和下划线之间的间距

3 个答案: