LI元素的文本分隔符

Question

我想在我的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>

你怎么看？谢谢.

Answer 1

您可以使用伪元素在元素后面包含文本,并且可以使用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: "/";
}

Answer 2

这是我用LI分隔的LI元素的解决方案 (管道):

li + li:before {
    content: " | ";
}

在这种情况下,邻接组合器(加号,+)非常方便.它允许您设置元素的样式,如果它已经被另一个指定的元素直接添加.由于第一个li之前没有另一个li,因此它不会有前面的内容.键入的次数远远少于:

li:before {
  content: " | ";
}

li:first-child:before {
  content: "";
}