html - 是否可以向 css 边框属性添加填充？

Question

我试图让这个 jsfiddle ( http://jsfiddle.net/kkbdex3p/ ) 看起来更像这样: http://i.imgur.com/8FxmAeR.jpg

更具体地说，我注意到在图像中，各部分之间的边框似乎在顶部和底部有此填充，因此边框不是全高。是否可以在我的 jsfiddle 示例中执行此操作，即使红色边框在顶部和底部有一个填充，以便它们不是全高？

我想像这样添加一个新元素:

<li class="divider"></li>

也许尝试设置样式(1px 宽，顶部和底部填充)，但我得到了奇怪的结果，如果可能的话，我喜欢仅使用 css 的解决方案。有什么想法吗？

Answer 1

您可以使用 :after 伪元素来实现此目的:

li {
    display: inline-block;
    position: relative;
    padding: 0 20px;
}

li:after {
    display: block;
    position: absolute;
    top: 5px;
    bottom: 5px;
    border-right: 1px solid red;
    content: '';
    margin: 0 -20px;
}

li:first-child:after { display: none; } 

jsFiddle Demo