前端开发

css – LI元素的文本分隔符

2021-01-18 14:57:09 阅读数 7107 收藏 0
我想在我的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: "/";
}