html - 如何仅将边框添加到元素宽度的百分比，CSS 技巧

Question

问题...

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

下图显示了我正在努力实现的目标，请注意顶部和底部边框仅拉伸(stretch)宽度的 70% 左右...

起点

作为起点，我创建了上面的内容，使用我称之为“不整洁的 HTML”的内容将这些分隔符添加到列表中。

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

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

我的问题

所以，如果上面的解释不够好，我想给 block 元素应用边框，但只显示整个元素的特定宽度的边框。

显然这不能仅使用 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;
}