菜单导航/URHere/面包屑,通过CSS中的content简洁表达代码

比如我们要写一个菜单导航/URHere/面包屑,如:

  首页 > 个人中心 > 修改密码

代码:

<ul>
    <li><a href="javascript:void(0);">首页</a></li>
    <li><span>></span></li>
    <li><a href="javascript:void(0);">个人中心</a></li>
    <li><span>></span></li>
    <li><a href="javascript:void(0);">修改密码</a></li>
</ul>

现在,通过CSS中的content,可以如下写法:

<style>
    ul>li+li:before {content:">"; color:gray; padding: 0 5px;}
</style>


<ul>
    <li><a href="javascript:void(0);">首页</a></li>
    <li><a href="javascript:void(0);">个人中心</a></li>
    <li><a href="javascript:void(0);">修改密码</a></li>
</ul>
原文地址:https://www.cnblogs.com/kandyvip/p/5253799.html