让h1的边界更接近底部

Question

这是我的 HTML ：

<header>
    <hgroup>
        <h1><span>GUITARRA</span></h1>
        <h2>Profesor</h2>
    </hgroup>
</header>

这是我的 CSS （添加*规则）：

*{
    padding: 0; margin: 0;
    font-size: 18px;
    font-family: arial;
}

header h1{
    font-size: 42px;
}

header h1 span{
    border-bottom: 3px solid red; 
    font-size: inherit;
}

这里的问题是我想要比这更接近地应用“下划线”效果：

接近这一点，我的意思是......：

如果我使用text-decoration: underlined;，我会得到更接近但非常细的线条，这不是理想的效果。

有办法吗？

修改

jsFiddle

Answer 1

如果您想要完全控制下划线位置，请尝试以下操作：

header h1 {
    font-size: 42px;
}
header h1 span {
    font-size: inherit;
    position: relative;
}
header h1 span:before {
    content: '';
    border-top: 3px solid red;
    font-size: inherit;
    position: absolute;
    width: 100%;
    bottom: 6px;
}

添加伪元素以创建下划线，然后使用绝对定位来调整垂直位置。

请参阅演示：http://jsfiddle.net/audetwebdesign/Xsk4R/

Answer 2

试试这个：

Working Example

header h1 span {
    display: inline-block;
    border-bottom: 3px solid red;
    font-size: inherit;
    height: 40px;
}

只需调整高度即可根据需要上下移动下划线。

Answer 3

如果你的填充设置为0，那么我会想象你的h1的行高正在创造差距。尝试降低行高（你可能只需要看起来正确），你应该能够将下划线放在任何你想要的地方。

Answer 4

在line-height代码

上设置h1

DEMO http://jsfiddle.net/kevinPHPkevin/CUhXp/

line-height: 30px;

Answer 5

使用：

padding-bottom:0px;

在h1上。

有一个自动填充，所以这将把它带走。