2个边框，分层和不同的颜色，宽度和高度

Question

不确定如何描述它，所以这里有一张照片：

这是我到目前为止所尝试过的，但是跨度不明显。

.border{
  border-bottom: 1px solid #666;
  width:400px;
  position:relative;
}
.border span{
    border-bottom:4px solid red;
    display:inline-block;
    width:50px;
    position:absolute;
    left:48%;
    bottom:-4px;
}

Answer 1

好的，试试这个：

HTML：

<div class="border"></div>

CSS：

.border{
  width:400px;
  height: 1px; /* instead of border */
  background: #666;
  position:relative;
}

/* pseudo-element instead of span for cleaner HTML */
.border:before { 
    content: '';
    border-bottom:4px solid red;
    display:inline-block;
    width:50px;
    position:absolute;
    left:48%;
    top:-2px; /* instead of bottom, go top by half the height */
}

Answer 2

以保证金替换底部：

.border span{
    border-bottom:4px solid red;
    display:inline-block;
    width:50px;
    position:absolute;
    left:48%;
    margin-bottom:-2px;
}

Answer 3

试试这个 CSS     div.container {border-top：solid 1px red; padding：0px;}             div.inside {height：100％; width：100％; border-top：2px solid red; margin：0px;}

HTML

内容

我没有测试过，但应该可以正常工作