是否可以向 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 演示