如何在每一端制作带圆圈的水平边框

Question

我需要像这张图片一样制作边框

有人有想法吗？我尝试过:after和:在css的属性之前但没有成功.html标签是h1,需要底部的那种边框.有可能成功吗？

Answer 1

伪元素!

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

小提琴:http://jsfiddle.net/GVb59/