Html 2个边框，分层且颜色、宽度和高度不同

不知道如何描述它，所以这里有一张图片：

这是我到目前为止尝试过的，但是跨度不可见

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

---

将底部替换为边距：

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

试试这个 css div.container{边框顶部：实心1px红色；填充：0px；} 内部分区{高度：100%；宽度：100%；边框顶部：2px纯红；边距：0px；}

html

内容 我还没有测试过，但它应该可以工作

好的，试试这个：

HTML:

---

你能进一步解释一下你想用这个做什么吗？它应该是一个静态元素、某种进度条还是一个花哨的边框？另外，您是否打算在这个“跨度”中添加一些内容？你的HTML是什么样的？你的css完全按照描述的做，那么问题是什么？这里有一个fiddle@Brian，如果你看这个jsfiddle和图片，它是不一样的。侧面的线条应与红线的中间对齐。@Luciano标题中说有两种不同颜色的边框并对齐。我附上了一张照片。我猜“图片胜过千言万语”这句话是无效的。谢谢，我用几乎相同的伪元素回答了它。删除了我的答案，这样我可以选择你的答案并给你评分：）

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

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