面包屑长 – 有爱前端

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>面包屑长</title> <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 1em; background-color: rgb(227,227,227); } /* Regular breadcrumbs */ ul { list-style-type: none; margin: 0; padding: 2em; color: #333; } li { display: inline-block; position: relative; padding-right: 2em; margin: 0; } li:after { content: '>'; position: absolute; display: inline-block; right: 0; width: 2em; text-align: center; } li:last-child { font-weight: bold; } li:last-child:after { content: ''; } a { text-decoration: none; display: inline-block; color: #333; white-space: nowrap; } a:hover { text-decoration: underline; } /* Collapsed breadcrumbs */ .collapsed li { overflow: hidden; } .collapsed li:after { background: rgb(227,227,227); background: linear-gradient(90deg, rgba(227,227,227,0.4) 0%, rgba(227,227,227,1) 35%); padding-left: 1em; } .collapsed a { max-width: 2em; transition: max-width 300ms ease-in-out; } .collapsed a:hover, .collapsed a:focus, .collapsed li:hover a { max-width: 1000px; } .collapsed li:hover:after { padding-left: 0em; background: transparent; } </style> </head> <body> <ul class="collapsed"> <li><a href="#">Home</a></li><li><a href="#">First link</a></li><li><a href="#">Second link</a></li><li><a href="#">Another lengthier link</a></li><li><a href="#">Final link in the hierarchy</a></li><li>Current page</li> </ul> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 面包屑长