底部边框仅为文本加下划线

Question

嗨我希望边框底部下划线看起来像这样，

所以基本上它只会强调文字，

我注意到我的网站（Test set up here）会扩展如下所示的全宽，

我注意到我需要减少蓝色，宽度/高度，虽然我没有设法实现这一点，并保持导航条合理，

我确实尝试删除nav-justified，并使用text-align：center，但它不会居中。

问题：如何让导航栏居中，边框底部只扩展到文本的长度。

谢谢。

Answer 1

只需使用范围将文本包装在<a></a>标记内，然后将边框应用于<span>而不是<a>。所以你会得到这样的东西：

<a class="menu" href="link"><span>Shop</span></a>

然后在css中这样：

a.menu:hover span { border-bottom: 2px solid black; }

Answer 2

改变这个：

.nav > li > a {
     display: block;
}

到此：

.nav > li > a {
     display: inline-block;
}

这将有助于您的锚点在inline-block之后居中，可能会有其他效果：

.navbar-nav.nav-justified > li{
   text-align:center;
}