带有无边框伪元素的有边框元素答案

【问题标题】：Bordered elements with non-bordered pseudo-elements带有无边框伪元素的有边框元素
【发布时间】：2015-02-14 17:01:26
【问题描述】：

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

这样的面包屑列表时

<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/

【问题讨论】：

jsfiddle.net/oboy1a4r/1 这就是你想要达到的目标吗？
@gearsdigital 我也想要最后一个列表元素的边框

标签： html css pseudo-element

【解决方案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 兼容性；如果这是一个优先事项，那么您将不得不使用带有li + li:before 的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;
}

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 .)

【讨论】：

1+ 用于链接到相关文档。我不确定说伪元素是子元素是否正确，因为它们在技术上不存在于 DOM 中。
@Josh Crozier：它们不存在于 DOM 中（在 CSS 中称为文档树），但是布局中呈现的框（格式化结构）确实是实际元素框的子级。

【解决方案2】：

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

Updated Example

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

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

【讨论】：