我有一个水平导航.我正在尝试用“|”分隔每个导航项(管道)仅使用css.
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul
现在它看起来像这样
First Second Third Fourth Fifth
我希望它看起来像这样
First | Second | Third | Fourth | Fifth
我能用css来放一个“|”在每个< li>之前
li:before {
content:"|";
}
结果如何
| First | Second | Third | Fourth | Fifth
如何在添加“|”的情况下执行此操作到第一项？
解决方法
您可以使用
:not伪类：
li:not(:first-child):before {
content: "|";
}
ul {
display: flex;
list-style: none;
}
li:not(:first-child):before {
content: "|";
padding: 5px;
}
<ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul>
