Question

是否可以将|作为分隔符添加到CSS菜单中的每个列表元素？

我尝试了content: "|"，但它没有用。

菜单如下所示：

<ul>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
</ul>

结果是：

link link link link

我希望：

link | link | link | link

我知道如何在JavaScript中实现它，但CSS会更好:)菜单是自动生成的，我不想搞砸它。

Answer 1

您需要为content使用伪元素，例如::before或::after：

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

Here’s a demo.

正如其他人所提到的那样，如果您正在寻找一条线路，请根据需要将border-(left|right)与padding或margin一起使用。

Answer 2

我会用边框做到这一点：

ul li a { border-left:1px solid #000; display:block; }

如果您不想在第一行上添加一行，请添加：

ul li a:first-child { border:none; }

Answer 3

如果您发布了迄今为止尝试过的内容，那会很有帮助，但这应该有效：

li:not(:last-child):after {
  content:"|";
}

Working sample on JSfiddle

Answer 4

使用border：

li{border-left : 1px solid black;}
li:first-child{border : none;}

Answer 5

查看this fiddle。

li
{
    float:left;
    list-style:none;
}
li:after
{
    content:"|";
    margin:0px 3px;
}

修改

直到我发布我的最后还有一个额外的管道并且其他人也在我之前写了正确的方式而没有摆脱我写的here is it updated之后才注意到。

li { float:left; list-style:none; } li+li:before { content:"|"; margin:0px 3px; }

Answer 6

像这样的东西

http://jsfiddle.net/SzvQq/

ul li a {
    display: block;
    padding: 0 15px;
    border-left: 1px solid #000;
}

ul li:first-child a {
    border-left: none;
}

添加|菜单中的li标签

6 个答案: