css – LI元素的文本分隔符

我想在我的li元素之间添加一个斜杠(‘/’)，但我不知道在语法上做最好的方法。现在，我只是在li标签中包含正斜杠，并添加了不间断空格的间距，如下所示：

<ul id="footer_menu">
    <li>Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

你怎么看？谢谢。

解决方法

您可以使用伪元素在元素之后包含文本，您可以使用CSS3选择器从最后一个元素中删除尾部斜杠。

#footer_menu li:after {
    content: "/";
}
#footer_menu li:last-child:after {
    content: "";
}

编辑：

整个事情可以在一个更好的CSS3中完成。

#footer_menu li:nth-child(n+2):before {
    content: "/";
}

编辑：编辑：

这比这更容易

#footer_menu li + li:before {
    content: "/";
}

原文地址：https://www.jb51.cc/css/219614.html