窄吗?
在主菜单上，如果菜单链接处于活动状态，则在底部有一个边框。它工作得很好。我有以下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>
尝试使用伪元素:after来实现这一点，因为我认为不可能使边界比元素的宽度窄。
检查此提琴:http://jsfiddle.net/6QfNs/
边框不能比它所设置的元素窄。所以你不能用边框来达到你的目的。
你可以使用一个伪元素，设置它的边框并给它想要的宽度:
CSS:
.active:after {
content:'';
display:block;
width:20px;
border-bottom: 4px solid #888;
}
在解决这类问题时，使用伪元素的技术是非常熟悉和众所周知的。然而，我想介绍另一种使用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;
}