CSS Breadcrumbs add word on hover

by Jlipman

HTML

<html>
<head>
<title>CSS Breadcrumbs add word on hover</title>
</head>
<body>
<ul class="breadcrumb">  
     <li><a href="/" class="home"><span>Home</span></a></li>  
     <li><a href="/products.html"><span>Products</span></a></li>  
     <li><a href="/products/lanterns.html"><span>Lanterns</span></a></li>  
 </ul> 
</body>
</html>

CSS

ul li{
  display: inline-block;
  margin-right: 20px;
}
/* Specify a blank prefix which is fully transparent */  
 ul.breadcrumb a span:before {  
     opacity:0;  
     content: '';  
     transition: all 1s ease;  
     transition-property: width, opacity;  
 }  
 /* Specify a prefix with a word which is fully opaque */  
 ul.breadcrumb a:hover span:before {  
     opacity:1;  
     content: 'More ';  
 }  
 /* Same as above but different prefix for this particular link */  
 ul.breadcrumb a.home:hover span:before {  
     opacity:1;  
     content: 'Return to ';  
 }  
 /* Add the CSS Glyph: angle quotation mark, right to this particular link [Optional] */  
 ul.breadcrumb a.home:before {  
     content:'\00bb';  
     margin-right:5px;  
 }