CSS Breadcrumbs add word on hover

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: 'More ';  
     font-size: 0;
     transition: all 0.5s ease;     
 }  
 /* Specify a prefix with a word which is fully opaque */  
 ul.breadcrumb a:hover span:before {  
     opacity:1;  
     /*content: 'More '; */
     font-size: inherit;
 }  
 /* Same as above but different prefix for this particular link */  
 ul.breadcrumb a.home span:before {       
     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;  
 }