Print

CSS Add Text to Breadcrumb Link with a Transition

What?
This is an article I hope to refine one day where given a set of breadcrumb hyperlinks, when I hover the mouse over the links, the text changes and the transition between the two is controlled smoothly.

Why?
At time of print, I couldn't find any clear example demonstrating this so here's my take on it:

What I have
copyraw 
» Home / Products / Lanterns
  1.  » Home / Products / Lanterns 
What I want (on mouseover)
copyraw 
// if I hover the mouse over the "Home" link:
» Return to Home / Products / Lanterns        

// if I hover the mouse over the "Products" link:
» Home / More Products / Lanterns        

// if I hover the mouse over the "Lanterns" link:
» Home / Products / More Lanterns
  1.  // if I hover the mouse over the "Home" link: 
  2.  » Return to Home / Products / Lanterns 
  3.   
  4.  // if I hover the mouse over the "Products" link: 
  5.  » Home / More Products / Lanterns 
  6.   
  7.  // if I hover the mouse over the "Lanterns" link: 
  8.  » Home / Products / More Lanterns 

How?
Given the following HTML:
copyraw 
<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>
  1.  <ul class="breadcrumb"> 
  2.      <li><a href="/" class="home"><span>Home</span></a></li> 
  3.      <li><a href="/products.html"><span>Products</span></a></li> 
  4.      <li><a href="/products/lanterns.html"><span>lanterns</span></a></li> 
  5.  </ul> 

Using CSS only, I have so far achieved the following:
copyraw 
/* 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;
}
  1.  /* Specify a blank prefix which is fully transparent */ 
  2.  ul.breadcrumb a span:before { 
  3.      opacity:0; 
  4.      content: ''; 
  5.      transition: all 1s ease; 
  6.      transition-property: width, opacity; 
  7.  } 
  8.  /* Specify a prefix with a word which is fully opaque */ 
  9.  ul.breadcrumb a:hover span:before { 
  10.      opacity:1; 
  11.      content: 'More '; 
  12.  } 
  13.  /* Same as above but different prefix for this particular link */ 
  14.  ul.breadcrumb a.home:hover span:before { 
  15.      opacity:1; 
  16.      content: 'Return to '; 
  17.  } 
  18.  /* Add the CSS Glyph: angle quotation mark, right to this particular link [Optional] */ 
  19.  ul.breadcrumb a.home:before { 
  20.      content:'\00bb'; 
  21.      margin-right:5px; 
  22.  } 
The last snippet is completely optional if you want to prefix the character » to your breadcrumbs.

Unfortunately, this only deals with the opacity transition as the width transition is not a smooth one. If anyone has a tried and working solution to the width transition then feel free to comment/message me (please test before sending it to me as I'm aware of width transitions for div layers).

DEMO:
See my JsFiddle jsfiddle.net/Jlipman/4kj96rL0/1

Submitted by Ike
This version submitted as an update is a little smoother as it adds a font-size transition:
copyraw 
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;  
 }
  1.  ul li{ 
  2.    display: inline-block; 
  3.    margin-right: 20px; 
  4.  } 
  5.  /* Specify a blank prefix which is fully transparent */ 
  6.   ul.breadcrumb a span:before { 
  7.       opacity:0; 
  8.       content: 'More '; 
  9.       font-size: 0; 
  10.       transition: all 0.5s ease; 
  11.   } 
  12.   /* Specify a prefix with a word which is fully opaque */ 
  13.   ul.breadcrumb a:hover span:before { 
  14.       opacity:1; 
  15.       /*content: 'More '; */ 
  16.       font-size: inherit; 
  17.   } 
  18.   /* Same as above but different prefix for this particular link */ 
  19.   ul.breadcrumb a.home span:before { 
  20.       content: 'Return to '; 
  21.   } 
  22.   /* Add the CSS Glyph: angle quotation mark, right to this particular link [Optional] */ 
  23.   ul.breadcrumb a.home:before { 
  24.       content:'\00bb'; 
  25.       margin-right:5px; 
  26.   } 
See Ike's JsFiddle: jsfiddle.net/svq2u0ez


Category: Cascading Stylesheets :: Article: 680