2 borders, layered and different color, width and height

Question

Not sure how to describe it, so here's a pic:

This is what I've tried so far, but the span is not visible.

.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

Ok, try this:

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

Replace bottom by margin :

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

Answer 3

try this css div.container{border-top:solid 1px red;padding:0px;} div.inside{height:100%;width:100%;border-top:2px solid red;margin:0px;}

html

content

i havent tested but it should work