Pure CSS Breadcrumbs

by secretgspot

HTML

<ol class="breadcrumb">
    <li><a href="#">Root</a></li>
    <li><a href="#">Folder</a></li>
    <li><a href="#">Sub-folder</a></li>
    <li><a href="#">File</a></li>
</ol>

CSS

body {
    background: #f9f9f9;
    padding: 100px;
}
.breadcrumb {
    background: #eee;
    border: 1px solid #c6c6c6;
    border-radius: 2px;
    color: #666;
    font: 14px/30px sans-serif;
    height: 30px;
    list-style: none;
    padding: 0;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.75);
    overflow: hidden;
}
.breadcrumb li {
    float: left;
}
.breadcrumb a {
    background: #e6e6e6;
    color: #666;
    display: block;
    padding: 0 30px 0 40px;
    position: relative;
    text-decoration: none;
}
.breadcrumb li:first-child a {
    padding-left: 25px;
}
.breadcrumb li:last-child a:hover {
    background: #eee;
    cursor: text;
}
.breadcrumb li a:after {
    background: #e6e6e6;
    box-shadow: 1px -1px 0 #c6c6c6;
    content: '';
    height: 22px;
    position: absolute;
    right: -10px;
    top: 4px;
    width: 22px;
    z-index: 10;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
.breadcrumb a:hover,
.breadcrumb li a:hover:after {
    background: #fff0a0;
}
.breadcrumb li:last-child a:after {
    box-shadow: none;
}
.breadcrumb li:last-child a,
.breadcrumb li:last-child a:after,
.breadcrumb li:last-child a:hover:after {
    background: #eee;
}