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

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/