CSS：悬停时导航项顶部的边框

Question

以下是模拟的截图：

这就是我所拥有的：

我仍在处理阴影，底部边框在整个容器宽度上都是静态的。

这是我的标记：

<div class="masthead">
    <div class="container">
        <a href="#" class="navbar-brand"></a>
    </div>

    <nav class="collapse navbar-collapse">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <ul class="nav navbar-nav pull-right">
                        <li>How we do it</li>
                        <li>About</li>
                        <li>Clients</li>
                        <li>Whats new</li>
                        <li>Contact</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</div>

这是我的sass：

.masthead {
    padding-top: 10px;

    nav {
        &.collapse {
            background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
            background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
            background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
            background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
            background: linear-gradient(to bottom,  rgba(0,0,0,0.15) 10%,rgba(0,0,0,0) 45%);

            text-transform: uppercase;

            ul { padding-top: 10px; }
            ul > li {
                margin: 0 20px;
                &:hover { border-top: 3px solid #7ad3f7 }
            }
        }
    }

    .navbar-brand {
        display: block;
        height: 51px;
        width: 209px;
        background: asset-url('logo.png') top left no-repeat;
        margin-bottom: 15px;
    }
}

我遇到的问题是试图让我的标记看起来像样机。如何让顶部边框（悬停）出现在导航容器区域之外？

Answer 1

你可以用边框和定位来做。

为常规li元素添加透明边框（未覆盖）。 悬停时将颜色更改为#7ad3f7。同时添加position: relative;和top: -15px;以正确定位边框。

<强> Fiddle

CSS：

.masthead nav.collapse ul > li {
    display: inline-block;
    border-top: 6px solid rgba(0,0,0,0);
    height: 51px;
    line-height: 51px;
    position: relative;
    top: -15px;
}
.masthead nav.collapse ul > li:hover {
    border-top: 6px solid #7ad3f7;
}

Answer 2

以下是使用:before伪元素的一种方法：

Example Here

.masthead nav.collapse ul {
    padding-top: 10px;
    position: relative;
}
.masthead nav.collapse ul > li:before {
    content: '';
    position: absolute;
    width: 100%;
    background: #7ad3f7;
    height: 4px;
    top: -14px;
    display: none;
}
.masthead nav.collapse ul > li:hover:before {
    display: block;
}

Answer 3

此示例使用:after伪选择器。我还在悬停效果上添加了一个简单的动画。这是因为我没有使用边框，这使得这个设计变得更加困难，而是选择使用伪类。

li {
  display: inline-block;
  position: relative;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 45%);
}
li:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 5px;
  background: transparent;
  left: 0;
  top: 0;
  transition: all 0.5s;
}
li:hover:after {
  background: #7ad3f7;
  left: 0;
  top: -5px;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>