html+li:before,网站前端开发利用CSS伪元素:before实现li与li之间的分隔符

前端开发是创建Web页面呈现给用户的过程。通过HTML，CSS等各种技术、前端框架解决方案，来实现互联网产品的用户界面交互。而在我们网站项目进行前端开发最少不了的就是导航条及面包屑式导航，并且都是使用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

• 网站前台
• 站内信息
• 管理员：Mr.Yang
• 设置

浏览效果