css3伪元素:before实现面包屑导航栏

2018-12-2610:12:27网页制作Comments3,037 views字数 354阅读模式

<ul class="breadcrumb">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Pictures</a>
    </li>
    <li><a href="#">Summer 15</a>
    </li>
    <li>Italy</li>
</ul>
复制代码

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {
    display: inline;
}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {
    color: green;
}
复制代码

效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9075.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9075.html