html - 如何制作两端带圆圈的水平边框

Question

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

有人有想法吗？ 我尝试使用 css 的 :after 和 :before 属性，但没有成功。 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;
}

fiddle :http://jsfiddle.net/GVb59/