CSS Add Text to Breadcrumb Link with a Transition

: Joel Lipman; Cascading Stylesheets; 18 May 2019; Hits: 3589

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

copy raw

» Home / Products / Lanterns

» Home / Products / Lanterns

What I want (on mouseover)

copy raw

// 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

// 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

How?
Given the following HTML:

copy raw

<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>

<ul class="breadcrumb">
<li><a href="/" class="home">Home</a></li>
<li><a href="/products.html">Products</a></li>
<li><a href="/products/lanterns.html">lanterns</a></li>
</ul>

Using CSS only, I have so far achieved the following:

copy raw

/* 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;
}

/* 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;
}

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:

copy raw

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;  
 }

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;
}