减少链接边框

Question

简介 - 我需要缩小文本和边框之间的间距。

它看起来像什么：

它需要看起来像什么：

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; }

Answer 1

我认为你不能减少文本和边框之间的空间。以下是使用:before和:after伪元素的解决方案。要调整间距，请更改top和bottom值。

See on 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;

Answer 2

您可以使用line-height属性和padding执行此操作。在这种情况下，您需要调整line-height：

line-height: 10px;

演示：http://jsfiddle.net/Y6Dj3/1/