CSS3 Breadcrumbs Concept

index.html

<div class="content_row content_row_01">
    <div class="breadcrumb">
        <ul>
            <li><a href="#" title="Main Link" class="link">Main</a></li>
            <li><a href="#" title="Main Link" class="link">Main Category</a></li>
            <li><a href="#" title="Main Link" class="link">Sub Category</a></li>
            <li><a href="#" title="Main Link" class="link">Current</a></li>
        </ul>
    </div>
</div>
<div class="content_row content_row_02">
    <div class="breadcrumb">
        <ul>
            <li><a href="#" title="Main Link" class="link">Main</a></li>
            <li><a href="#" title="Main Link" class="link">Main Category</a></li>
            <li><a href="#" title="Main Link" class="link">Sub Category</a></li>
            <li><a href="#" title="Main Link" class="link">Current</a></li>
        </ul>
    </div>
</div>
<div class="content_row content_row_03">
    <div class="breadcrumb">
        <ul>
            <li><a href="#" title="Main Link" class="link">Main</a></li>
            <li><a href="#" title="Main Link" class="link">Main Category</a></li>
            <li><a href="#" title="Main Link" class="link">Sub Category</a></li>
            <li><a href="#" title="Main Link" class="link">Current</a></li>
        </ul>
    </div>
</div>

style.css

.breadcrumb {
    width: 100%;
    display: inline-block;
    padding-bottom: 1%;
    font-family: Georgia, sans-serif;
}

    .breadcrumb ul li {
        display: inline-block;
    }

    .content_row_01 .breadcrumb ul li:after {
        content: "»";
    }

    .content_row_02 .breadcrumb ul li:after {
        content: "›";
    }

    .content_row_03 .breadcrumb ul li:after {
        content: "/";
        color: #ccc;
        margin-left: 10px;
    }

    .breadcrumb ul li:after {
        display: inline-block;
        margin: 0 5px;
    }

    .breadcrumb ul li:last-child:after {
        content: "";
    }

        .breadcrumb a {
            color: #985ab8;
        }

        .breadcrumb ul li:last-child a {
            text-decoration: none;
            cursor: default;
            color: gray;
        }

        .content_row_03 .breadcrumb ul li:first-child a {
            font-weight: bold;
        }

            .breadcrumb a:hover {
                text-decoration: none;
            }