伪元素的使用之面包屑导航

伪元素的使用之面包屑导航

关于面包屑导航，网上有很多参考案例，这里就不一一说明了，只说明我遇到过的问题。

---

效果图如下：

这里附上链接： 面包屑导航 以上效果通过css得出，而我要的效果不一样，所以我通过伪元素来写

---

我的效果图如下：

可以看到这种效果里面文字后面的那个尖角只能通过图片拼接上去，首先想到的是通过伪元素after来实现，附上代码：

ol li{
    height: 40px;
    line-height: 40px;
    list-style: none;
    float: left;
}
ol li:after{
    color: #ccc; 
    content: "";
    display: inline-block;
    width: .242rem;
    height: .966rem;
    background: url(../images/icon.png); 
    background-size: 100% 100%;
}

将content设为空，然后设置这个元素为行内块，设置这个元素的背景图片就行了，还可以根据自己想要的效果调整背景的大小与位置