html - 偏移水平边框开始

Question

请引用以下mock-up here .我试图让水平边框从左边框的右手边缘开始(即不相交)。

很像这样:

CSS

ul{
  list-style: none;
}
li:first-of-type{
   border-top: solid 1pt #cccccc;
}

li{
    padding:10px;
    border-bottom: solid 1pt #cccccc;
    border-left: solid 6px #cc0000;
}

标记

<ul>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
</ul>

编辑

抱歉，我最终没有提及 <li></li> 上的那些左边缘s 将是不同的颜色，所以不幸的是应用了边框 <ul>行不通。

Answer 1

一种方法是使用如下伪元素添加顶部和底部边框:

ul {
    list-style: none;
}

li {
    padding:10px;
    border-left: solid 6px #cc0000;
    position: relative;
}

li:first-of-type:before {
    border-top: 1px solid #ccc;
    content: "";
    display:block;
    height: 1px;
    left: 0;
    overflow:hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

li:after {
    border-bottom:1px solid #ccc;
    bottom: 0;
    content: "";
    display:block;
    height: 1px;
    left: 0;
    overflow:hidden;
    position: absolute;
    width: 100%;
}

http://jsfiddle.net/javotLrb/