版权声明：此文为作者所有！ https://blog.csdn.net/Julie115/article/details/81811338
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>面包屑导航</title>
<style>
ul{
list-style:none;
background-color:#eee;
padding:8px 16px;}
li{
display:inline;
}
a{
text-decoration:none;
color:#778899;}
li+li:before{
content:'/';
padding:8px;
color:#778899;;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="">首页</a></li>
<li><a href="">前端</a></li>
<li><a href="">html教程</a></li>
<li><a href="">html段落</a></li>
</ul>
</div>
</body>
</html>
预览效果：
难点总结：
1.用到兄弟选择器li+li,给li标签的下一个li兄弟标签前面加上“/”
2.伪元素before是css2伪元素，用单冒号“：”全部浏览器都兼容，要注意content冒号后面的内容部分要用用单引号‘’包起来。