如何在CSS中绘制子元素的边框在其父元素之外(或模拟此效果)？

Question

我不是CSS专家，并试图自定义引导程序的导航栏。有一个父元素，里面有一些链接。所需的效果 - 活动链接在其父容器下方显示选择突出显示（粗黑线）。当我尝试在活动链接上绘制底部边框时，它会扩展父元素的总高度，并且边框仍然在其内部绘制。如何实现？

.navbar-inverse .navbar-nav > li > a {
 border-bottom: 4px solid #000;
}

Answer 1

我不确定你在寻找什么，但这可能是鼓舞人心的。

您可以使用:after伪元素创建水平线（某种边框）并将其定位为absolute，而列表项定位为 relative 。（作为绝对定位元素的参考点）

li {
  min-height: 50px;
  position: relative;
}
li > a.active:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 4px;
  background-color: orange;
}

.HTML

<ul>
    <li><a href="" class="active">link #1</a></li>
    <li><a href="">link #2</a></li>
    <li><a href="">link #3</a></li>
</ul>

工作演示

Answer 2

你可以使用box-shadow，例如

.navbar-inverse .navbar-nav > li > a {
   box-shadow: 0 4px 0 #000;
}

应用于

元素的框阴影（必要时带有 -moz- 和 -webkit- 前缀）不会扩展元素本身的大小，因此其父元素不会增长。

请参阅代码笔上的此示例：http://codepen.io/anon/pen/eHxGz（并注意 span 元素的边框）

Answer 3

使用"override"

就像 css 中的 ！important，小提琴中的一个例子：

http://jsfiddle.net/83y27/5/

.parent { 
 width: 310px; 
 height: 650px;
 background: red ;
 background-size:cover;
}
.child {
      position:relative;
      width:700px !important;
      height:512px;
      background: blue !important;
      top:60px;
      bottom:65px;
      left:23px;
      right:24px;
      }