1

簡単 - テキストと境界線の間の間隔を狭くする必要があります。

それはどのようなものか：

それはどのようなものか

それがどのように見える必要があるか：

それがどのように見える必要があるか

HTML -

<div class="navigation">
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>

CSS -

a { font: 36px 'Bebas Neue', Arial, Sans-Serif; color: #fff; text-decoration: none; }
a:hover { color: #d5a72b; border-top: 3px solid #d5a72b; border-bottom: 3px solid #d5a72b; border-spacing: 0; }
a.active { color: #d5a72b; border-top: 3px solid #d5a72b; border-bottom: 3px solid #d5a72b; }
4

2 に答える 2

1

テキストとボーダーの間のスペースを減らすことはできないと思います。:beforeと:after疑似要素を使用したソリューションを次に示します。間隔を調整するには、 と の値を変更しtopますbottom。

JSFiddleで見る

a { 
    font: 36px 'Bebas Neue', Arial, Sans-Serif; 
    color: red; 
    text-decoration: none;
    position:relative;
}

a:before,
a:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:4px;
    background-color:#000;
}

a:before {
    top:2px;
}

a:after {
    bottom:2px;
}

また、次のルールを使用して、CSS を介して「ホーム」を「ホーム」に変更することもできます。

text-transform:uppercase;
于 2013-03-02T04:41:40.543 に答える
1

line-heightプロパティと を使用してこれを行うことができますpadding。この場合、微調整する必要がありますline-height:

line-height: 10px;

デモ: http://jsfiddle.net/Y6Dj3/1/

于 2013-03-02T04:46:10.557 に答える