css breadcrumbs

by secretgspot

HTML

<h1>.breadcrumb</h1>
<div class="breadcrumb">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="#" itemprop="url">
        <span itemprop="title">Home</span>
      </a>
      <span class="separator">&gt;</span>
    </div>  
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="#" itemprop="url">
        <span itemprop="title">Products</span>
      </a>
      <span class="separator">&gt;</span>
    </div>  
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="#" itemprop="url">
        <span itemprop="title">Green</span>
      </a>
      <span class="separator">&gt;</span>
    </div>
</div>

<h2>+ ".double"</h2>
<div class="breadcrumb double">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="#" itemprop="url">
        <span itemprop="title">Home</span>
      </a>
      <span class="separator">&gt;</span>
    </div>  
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="#/real" itemprop="url">
        <span itemprop="title">Product</span>
      </a>
      <span class="separator">&gt;</span>
    </div>  
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="#" itemprop="url">
        <span itemprop="title">Green</span>
      </a>
      <span class="separator">&gt;</span>
    </div>
</div>

<h2>+ ".slash"</h2>
<div class="breadcrumb slash">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="#" itemprop="url">
        <span itemprop="title">Home</span>
      </a>
      <span class="separator">&gt;</span>
    </div>  
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="#/real" itemprop="url">
        <span itemprop="title">Product</span>
      </a>
      <span class="separator">&gt;</span>
    </div>  
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="#" itemprop="url">
        <span...

CSS

.breadcrumb {
    overflow:hidden;
    zoom:1;
}

.breadcrumb div[itemscope] {
    float:left;
    display: inline-block;
}

.breadcrumb a[itemprop=url] {
    display:inline-block;
    text-decoration:none;
    padding:0.3em 0.5em;
}

.breadcrumb div[itemscope]:last-child a {
    color:inherit;
}

.breadcrumb span[itemprop=title] {}

/* slash separator */
.slash div[itemscope]:after {
    content:'/';
}

/* arrow separator */
.arrow div[itemscope]:after {
  content:'\002192';
}

/* double arrow separator */
.double div[itemscope]:after {
    content:'\00bb';
}

.slash div[itemscope]:last-child:after,
.arrow div[itemscope]:last-child:after,
.double div[itemscope]:last-child:after {
  content:'';
}

.breadcrumb div[itemscope]:last-child .separator,
.slash .separator,
.arrow .separator,
.double .separator,
.gradient .separator {
  display:none;
}


/* colorling arrow */
.gradient {
}

.gradient a[itemprop=url] {
    position:relative;
    z-index:0;
    color:#3F3F3F;
    background: #F9F9F9;
    background: -moz-linear-gradient(left, #F9F9F9 0%, #EFEFEF 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#F9F9F9), color-stop(100%,#EFEFEF));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#EFEFEF',GradientType=1 );
}

.gradient div[itemscope] {
    margin-right:0.5em;
    position:relative;
}

.gradient div[itemscope]:before {
    content:"";
    display:block;
    width:0;
    height:0;
    background:#f9f9f9;
    position:absolute;
    left:-0.5em;
    top:0;
    border-color:transparent transparent transparent #C4C4C4;
    border-style:solid;
    border-width:1em 0 1em 0.6em;
    z-index:1;
}

.gradient div[itemscope]:after {
    content:"";
    display:block;
    width:0;
    height:0;
    background:transparent;
    position:absolute;
    right:-0.5em;
    top:0;
    border-color:transparent transparent transparent #efefef;
    border-style:solid;
    border-width:1em 0 1em 0.5em;
   ...