css - 导航分隔符

Question

我需要在导航元素之间添加分隔符。分隔符是图像。

我的 HTML 结构是这样的:ol > li > a > img。

这里我提出两种可能的解决方案:

1. 要添加更多 li 标签以进行分隔(糟糕!)，
2. 在每个元素的图像中包含分隔符(这样更好，但它可能会导致用户可能会点击，例如“主页”，但会转到“服务”，因为它们一个接一个地出现，用户可能会不小心点击在属于“服务”的分隔符上)；

怎么办？

Answer 1

如果没有迫切需要使用图像作为分隔符，您可以使用纯 CSS 来实现。

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

这在每个列表项之间放置了一个栏，就像原始问题中描述的图像一样。但是由于我们使用的是 adjacent selectors ，它不会将横杠放在第一个元素之前。因为我们使用的是 :before 伪选择器，所以它不会把一个放在最后。