如何仅将边框添加到元素宽度的百分比,CSS Trick

Question

问题...

我再次寻找一个很酷的CSS技巧来帮助我实现效果,同时防止使用不整洁的HTML ...

下图显示了我想要实现的目标,注意顶部和底部边框仅延伸约70%的宽度...

一个起点

作为一个起点,我使用我称之为"不整齐的HTML"的方法创建了上述内容,将这些分隔符添加到列表中.

这是我的jsFiddle:http://jsfiddle.net/E93UE/

你会看到我有<li class="divider><!-- Divider --></li>,如果可能的话,这就是我想要摆脱的东西

我的问题

因此,如果上面的解释不够好,我想将一个边框应用于块元素,但只显示整个元素的特定宽度的边框.

显然这不能仅仅使用border:XXX,它可能需要一些:before和:after选择器......

可能的解决方案...

我有两个关于如何实现这一点的想法,一个不太实用,另一个我不太确定如何实现(这些只是想法):

1. 设置列表元素的宽度并给它overflow:visible,所有元素都有position:absolute,然后只应用边距将元素带出列表框...(不是一个好的修复,更喜欢我的原始)
2. 另一个解决方案,我不太确定如何实施,可能是要走的路.通过应用两个:before元素,position:absolute你可以覆盖每个边框的边缘(我认为)

Answer 1

给一个:after伪元素(demo)边框:

.separated:after {
    content: "";
    display: block;
    width: 70%;
    margin: 1em auto 0;
    border-bottom: solid;
}

Answer 2

我使用:before/ :afterpseudo-elements 重新创建了你的divider :

http://jsfiddle.net/thirtydot/E93UE/1/

#staff_list li:first-child:before, #staff_list li:after {
    content: '';
    display: block;
    margin: auto;
    position: relative;
    bottom: -26px;
    width: 500px;
    height: 2px;
    background: #b9b7b6;
}
#staff_list li:first-child:before {
    top: -14px;
    bottom: auto;
}

这些数字需要调整,你需要在有更多文本时测试它,但它可能足够接近.我做了其他更改以帮助此解决方案工作,将您的原始演示与我的比较.