Question

在主菜单上，如果菜单链接处于活动状态，则底部有一个边框。它工作正常。我有以下CSS：

.active {
  text-decoration: none;
  border-bottom: 4px solid #888;
}

目前border-bottom与列表项内的文本一样宽。但我想让它变得更窄。这可能吗？

这是HTML

<ul class="nav">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="about.html">About</a></li>
</ul>

Answer 1

尝试使用伪元素:after来实现这一点，因为我不认为可以使边框比元素的宽度更窄。

检查这个小提琴：http://jsfiddle.net/6QfNs/

Answer 2

边框不能比设置的元素窄。所以你无法通过边界实现目标。

<强> BUT

您可以使用伪元素，在其上设置边框并为其指定所需的宽度：

<强> DEMO

CSS：

.active:after {
    content:'';
    display:block;
    width:20px;
    border-bottom: 4px solid #888;
 }

Answer 3

使用伪元素的技术在解决这类问题时非常熟悉和众所周知。不过，我想介绍一种使用linear-gradient背景的另一种方式，只为每一种方式分享一下：

/* span is your menu item here */
span {
  font-size:20px;
  padding:4px;
  cursor:pointer;
}
span:hover {
  background:linear-gradient(red,red) no-repeat;
  background-size:60% 4px;
  background-position:center bottom;
}

我可以使边框底部看起来比<div>更窄吗？</div>

3 个答案:

Demo.