Question

我经常遇到的问题是当我有像

这样的面包屑列表时

<ul class="horizontal-list">
    <li><a href="/home.html">Here's a link</a></li>
    <li><a href="/home/subpage.html">Here's another link</a></li>
    <li>Here's the final link</li>
</ul>

ul.horizontal-list > li { display: inline; border-bottom: 1px solid #000;}
ul.horizontal-list > li + li:before { content: ">"; padding: 0 3px;}
ul.horizontal-list > li > a { text-decoration: none;}

我希望伪元素不具有其元素所具有的边框或其他属性。将border-bottom: 0;添加到ul.horizontal-list > li + li:before并不能达到目的。为什么不呢？

以下是该场景的小提琴：http://jsfiddle.net/oboy1a4r/

Answer 1

伪元素确实没有任何边界，这意味着设置border-bottom: 0什么都不做;但是，因为它们是part of the originating li elements，它们会在li元素框中呈现，因此li边框会扩展到伪元素。

此问题的一个简单解决方案是将边框应用于a子元素而不是li元素。这样，伪元素与有边框一起存在。

如果您还需要最后一个项目也有边框，则可以将其文本包装在span元素中并将边框应用于li > a, li > span：

<ul class="horizontal-list">
    <li><a href="/home.html">Here's a link</a></li>
    <li><a href="/home/subpage.html">Here's another link</a></li>
    <li><span>Here's the final link</span></li>
</ul>

...但如果您更喜欢在纯CSS中执行此操作而不使用无关标记，则需要

将:before伪元素更改为:after伪元素
将伪元素应用于除最后一个li（li:not(:last-child)）以外的所有元素，而不是除了第一个（li + li）以外的所有元素和
将边框应用于a元素以及最后一个li。

请记住，:last-child的使用将使您与IE8兼容;如果这是优先事项，那么您将不得不使用span元素与li + li:before如上所述。

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;
}

Updated fiddle

最后一点，由于所有方框（包括伪元素）都是内联的，因此使用空格而不是填充provide consistent spacing between the pseudo-elements and the rest of the text：

ul.horizontal-list > li:not(:last-child):after {
    content: " > ";
}

（从技术上讲，你不需要尾随空格，因为每个</li>结束标记后面的换行符为此目的的空白角色，但你可以为了一致性而包含它，它会collapse通常。）

Answer 2

您可以将border-bottom添加到子a元素中：

Updated Example

ul.horizontal-list > li > a { border-bottom: 1px solid #000; }

border-bottom: 0对伪元素无效的原因是因为伪元素上的边界不是。值得指出的是:before伪元素充当li元素的子元素。因此，边框将包含整个元素，包括伪元素，因为它基本上是 in 带边框的父元素。

带有非边界伪元素的边界元素

2 个答案: