伪元素确实没有任何边框,这意味着设置border-bottom:0什么都不做;但是,因为它们是
part of the originating li elements,所以它们在li元素框内呈现,因此li边框扩展到伪元素.
解决此问题的一个简单方法是将边框应用于子元素而不是li元素.这样,伪元素与有边框一起存在.
如果您还需要最后一个项目也有边框,您可以将其文本包装在span元素中并将边框应用于li> a,li>跨度:
- Here's a link
- Here's another link
- Here's the final link
…但如果您更喜欢在纯CSS中执行此操作而不使用无关标记,则需要执行此操作
>将伪元素更改为:after伪元素后,
>将伪元素应用于除最后一个li(li:not(:last-child))之外的所有元素,而不是除了第一个(li li)之外的所有li元素,并且
>将边框应用于元素以及最后一个元素.
请记住,使用:last-child将使您的IE8兼容性降低;如果这是一个优先事项,那么你将不得不使用li li的span元素:如上所述.
ul.horizontal-list > li:not(:last-child):after {
content: ">";
padding: 0 3px;
}
ul.horizontal-list > li > a, ul.horizontal-list > li:last-child {
text-decoration: none;
border-bottom: 1px solid #000;
}
ul.horizontal-list > li:not(:last-child):after {
content: " > ";
}
(从技术上讲,您不需要尾随空格,因为每个< / li>结束标记之后的换行符为此目的履行了空白角色,但为了保持一致性,您可以将其包括在内,它通常会在collapse中出现.)