1

这是我的一段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;
}

这里的问题是我想应用比这更接近的“下划线”效果： Guitarra 带下划线的单词预览

通过这个更接近，我的意思是......： Guitarra 单词下划线更近的预览

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

有没有办法做到这一点？

编辑

jsFiddle

4

5 回答 5

3

如果您想要绝对出色地控制下划线位置，请尝试以下操作：

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/

于 2013-08-28T20:22:50.050 回答
3

尝试这个：

工作示例

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

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

于 2013-08-28T20:23:14.030 回答
1

如果您的填充设置为 0，那么我会想象您的 h1 的行高会造成间隙。尝试减少行高（您可能只需要选择看起来正确的地方），您应该能够将下划线放在您想要的任何位置。

于 2013-08-28T20:20:40.583 回答
1

line-height在你的h1标签上设置一个

演示http://jsfiddle.net/kevinPHPkevin/CUhXp/

line-height: 30px;
于 2013-08-28T20:26:06.340 回答
0

use:

padding-bottom:0px;

on the h1.

there is a auto padding, so this will take it away.

于 2013-08-28T20:19:22.783 回答