如何模仿Google厚厚的红色下划线文字装饰

Question

我正在尝试使用this code模仿上述红色文字装饰（在“网页”下方）的外观。

又来了。

HTML：

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li class="active"><a href="#">Active</a></li>  

                    </ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
                </div><!-- END: "container" -->
            </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

CSS：

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff; 
  text-decoration: underline 3px;
  border-bottom:4px solid #ebebeb
}

我认为我的厚度是最佳的，而且颜色也是如此，但是，当你看到它时，你可以看到白色边框和导航栏之间有一个非常小的间隙，并且边框太长，所以我想知道

1. 如何消除这种差距，导致边框与白色背景“融合”。
2. 减少边框的长度，这似乎与其后面突出显示的框的宽度相对应。

有什么建议吗？感谢。

Answer 1

假设您不介意使用box-shadow属性，

Here's这样做。

应用设定高度以将列表项与导航栏匹配。

.navbar-inverse .navbar-nav > li { height: 52px; background: #080808; }

然后添加一个没有模糊和阴影扩散的框阴影。

.navbar-inverse .navbar-nav > .active > a {
    -webkit-box-shadow: 0px 14px 0px -10px #dbdbdb;
    -moz-box-shadow:    0px 14px 0px -10px #dbdbdb;
    box-shadow:         0px 14px 0px -10px #dbdbdb;
}

关于你的另一个问题，我在过去已经注意到你所指的“差距”似乎因浏览器而异。我能够消除它的唯一方法是带有负余量，但也许其他人有更好的解决方案。

Answer 2

1. 设置margin:0;
2. 元素的边框采用其整个宽度和/或高度。如果您希望它更小，您可能希望用div和position:absolute替换该边框（因此将容器设置为position:absolute）。然后将新的div设置为bottom:0;并选择最适合您的width。