文本和下划线之间的间距

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/