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

我不认为你可以减少文本和边框之间的空间。这是使用:beforeand: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 将 'Home' 更改为 'HOME'：

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 回答