html - 制作垂直列表，并在元素之间放置一些东西

Question

问题的第一部分很简单:

http://jsfiddle.net/Pq3KM/

ul li
{
    display: inline-block;
}

<ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
</ul>

到目前为止它工作正常，但我想要介于这些元素之间的东西。例如，我希望它们看起来相似:

menu1 | menu2 | menu3

代替

menu1 menu2 menu3

如何做到这一点？

Answer 1

您可以为此使用 :after 伪，这里使用 | 管道字符，它使用 content 属性和 嵌入>:after 伪。对于最后一个元素，我使用 last-of-type 来摆脱管道。在这里，您还可以通过将 :after 伪装成 inline-block 元素来添加 background-image。您也可以space up ^Demo 通过将元素变成 inline-block

Demo

ul li:after {
    content: " | ";
}

ul li:last-of-type:after {
    content: "";
}