How to make a horizontal border with circles on each end

Question

I need to make a border like this image

Anyone have an idea to make it? I tried with :after and :before attributes of css but with no sucess. The html tag is a h1 that needs that kind of border on the bottom. Is it possible to make it?

Answer 1

pseudo-elements!

div {
    border-bottom: 2px solid black; 
    padding-bottom: 15px; 
    position: relative;
}

div:before, 
div:after {
    position: absolute; 
    bottom: -6px; 
    left: 0; 
    height: 10px; 
    width: 10px; 
    background: black; 
    content: ""; 
    border-radius: 5px;
}

div:after {
    right: 0; 
    left: auto;
}

Fiddle: http://jsfiddle.net/GVb59/