Little CSS animation on hover - html

Question

Trying to create something like this.
I can't use letter-spacing. I created this code, but it doesn't work well.
http://jsfiddle.net/pyqq8wfe/
.refreshed_logo {
font-family: ProximaNovaBold;
font-size: 50px;
text-decoration: none;
color: #000000;
}
.logo_wrapper {
color: inherit;
text-decoration: none;
width: 250px;
position: absolute;
}
.refreshed_logo:after {
content: 'digital';
width: 20px;
height: 20px;
text-align: center;
position: absolute;
font-size: 20px;
background-color: red;
border-radius: 18px;
color: white;
margin-left: 4px;
margin-top: 3px;
text-indent: 8px;
font-weight: normal;
line-height: 1;
transition-property: width, height;
transition-duration: 0.2s, 0.2s;
transition-delay: 0s, 0.2s;
-o-transition-property: width, height;
-o-transition-duration: 0.2s, 0.2s;
-o-transition-delay: 0s, 0.2s;
-moz-transition-property: width, height;
-moz-transition-duration: 0.2s, 0.2s;
-moz-transition-delay: 0s, 0.2s;
-webkit-transition-property: width, height;
-webkit-transition-duration: 0.2s, 0.2s;
-webkit-transition-delay: 0s, 0.2s;
}
.refreshed_logo:hover:after {
width: 71px;
-webkit-transition: width 0.5s;
transition: width 0.5s;
text-indent: 2px;
}
.logo_wrapper:hover {
text-decoration: none;
}
<a href="/" class="logo_wrapper">
<span class="refreshed_logo">
Granat
</span>
</a>
Any thoughts?

Answer 1

Since you cannot use letter-spacing or split the words, below is an approach using border-right which along with overflow: hidden setting hides all characters after 'd'. On hover they are revealed and thus produce the effect.
.refreshed_logo {
font-family: ProximaNovaBold;
font-size: 50px;
text-decoration: none;
color: #000000;
}
.logo_wrapper {
color: inherit;
text-decoration: none;
width: 250px;
position: absolute;
}
.refreshed_logo:after {
content: 'digital';
width: 20px;
height: 20px;
/*text-align: center; not required */
position: absolute;
font-size: 20px;
background-color: red;
border-radius: 18px;
color: white;
/* following properties were added */
padding-left: 5px;
box-sizing: border-box;
border-right: 5px solid red;
overflow: hidden;
/* end of addition */
font-weight: normal;
line-height: 1;
transition-property: width, height;
transition-duration: 0.2s, 0.2s;
transition-delay: 0s, 0.2s;
}
.refreshed_logo:hover:after {
width: 65px;
transition: width 0.5s;
}
.logo_wrapper:hover {
text-decoration: none;
}
<a href="/" class="logo_wrapper">
<span class="refreshed_logo">
Granat
</span>
</a>

Answer 2

I've try to have the same result there's maybe better :
Last edit : for hide the others letter i've use the same color of the background, and only change the first letter color.
CSS :
.titre{
font-size:20pt;
}
.sstitre{
font-size:10pt;
font-weight:bold;
color:red;
background-color:red;
border-radius:10px;
padding-left:4px;
padding-right:2px;
width:10px;
position: absolute;
overflow:hidden;
transition:width 0.5s;
}
.sstitre::first-letter{
color:white;
}
.titre:hover .sstitre{
width:40px;
color:white;
}
HTML
<span class="titre">Granat<span class="sstitre">digital</span></span>
JSFidle