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: "/";
}

---

您可以将li内容放在一个范围内，然后使用CSS：

ul#footer_menu li span:after { content:"/"; padding:0 5px; }

或者类似的东西

编辑

---

啊，就像凯尔说的，但是添加最后一个孩子规则更完整。

如果你想做类似的事情 客户支持/发货信息/尺码表/隐私政策/联系方式 你可以用一些CSS来做

您需要将“first”类添加到集合中的第一个li中，如下所示

<ul id="footer_menu">
    <li class="first">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>

这将使所有li元素彼此相邻，并给您一个边框。结果将类似于

---

客户支持|配送信息|尺码表|隐私政策|联系

这是我针对由|（管道）分隔的LI元素的解决方案：

在这种情况下，邻接组合符（加号，+）非常方便。如果一个元素前面直接有另一个指定的元素，则可以使用它设置该元素的样式。由于第一个li前面没有另一个li，因此它不会预先添加内容。这比输入要少得多：

li:before {
  content: " | ";
}

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

对于那些使用的人，我为此写了一封信：

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

例如：

@include addSeparator('li', '|', 1em);

这将为您提供以下信息：

li+li:before {
  content: "|";
  padding: 0 1em;
}

---

你需要支持IE7吗？这个可能的复制品并不是这家伙想要的<代码>/！=

|

注意到了，但是这个解决方案是跨浏览器兼容的，不需要添加额外的CSS规则或黑客，只要您能够克服结果分隔符中的角度略有变化这一事实。很好的例子。如果先前的元素被隐藏了，比如使用引导隐藏-*，你知道怎么做吗？我是唯一一个需要使用

n+2

才能工作的人吗？不，你不是，你是唯一一个测试它的人。我现在就改。

@include addSeparator('li', '|', 1em);

li+li:before {
  content: "|";
  padding: 0 1em;
}