带无边框伪元素的带边框元素

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 并没有达到我的目的。为什么不呢？

这是一个 fiddle 场景：http://jsfiddle.net/oboy1a4r/

Answer 1

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

Updated Example

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

border-bottom: 0 在伪元素上不起作用的原因是因为边框不是在伪元素上。值得指出的是 :before 伪元素充当 li 元素的子元素。因此，边框将包含整个元素，包括伪元素，因为它本质上是在带有边框的父元素中。

Answer 2

伪元素确实没有任何边框，也就是说设置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

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

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

（从技术上讲，您不需要尾随 space，因为每个 </li> 结束标记后的换行符为此起着白色 space 的作用，但您可以包括为了保持一致性，它通常会 collapse。）

带无边框伪元素的带边框元素

Bordered elements with non-bordered pseudo-elements

html

css

pseudo-element