html - 文本和下划线之间的间距

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/