如何模仿谷歌的粗红下划线文字装饰答案

【问题标题】：How to emulate Google's thick, red underline text decoration如何模仿谷歌的粗红下划线文字装饰
【发布时间】：2014-07-13 17:01:01
【问题描述】：

我正在尝试使用this code 模拟上述红色文本装饰（“Web”下方）的外观。

又来了。

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
}

我觉得我的粗细是最佳的，颜色也是，但是，当你看它时，你会发现白色边框和导航栏之间有一个非常小的间隙，而且边框太长了，所以我想知道

如何消除该间隙，导致边框与白色背景“融合”。
减少我的边框的长度，这似乎与它后面突出显示的框的宽度相对应。

有什么建议吗？谢谢。

【问题讨论】：

标签： html css twitter-bootstrap-3 border text-decorations

【解决方案1】：

Here's 一种假设您不介意使用 box-shadow 属性的方法。

应用设置的高度以匹配列表项到导航栏。

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

关于您的其他问题，我过去注意到您所指的“差距”似乎因浏览器而异。我能够消除它的唯一方法是使用负边距，但也许其他人有更好的解决方案。

【讨论】：

谢谢，这看起来很棒。关于那个边距，是的，我在哪里将其定义为负数？
没问题，看看你原来的 bootply 你可以把它应用到.navbar-inverse .navbar-nav li { margin-bottom: -1px; }

【解决方案2】：

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

【讨论】：