利用CSS伪元素:before实现li与li之间的分隔符

li与li标签之间添加分隔符的方法很多，本文讲解一下用css的伪元素:before来实现，效果如上图。

实现方式

css样式写法 li+li:before{content: "|";}即可，则要加空隙写上padding: 0 20px;。

CSS样式

 .header ul{float: right;line-height: 60px;padding: 0px 30px;} .header ul li{float: left; font: 16px; list-style: none;} .header ul li+li:before { padding: 0 20px; color: #ddd;content: "|";}

HTML

 <div class="header">  <div class="menu">   <ul>    <li>网站前台</li>    <li>站内信息</li>    <li>管理员：Mr.Yang</li>    <li>设置</li>   </ul>  </div> </div>