html - 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 */
}