Reveal hidden letters from the left by sliding to the right - html

Question

I want to make the content animate so that the letters slide in to the right from the "T".
Here is a jsfiddle of the below:
.two {
width: auto;
-webkit-transition: all 1s ease;
}
.two:before {
content: "T";
width: auto;
}
.two:hover {
width: auto;
}
.two:hover:before {
display: none;
}
.two:hover:after {
content: "This is a Label";
width: auto
}
<div class="two">
</div>

Answer 1

Animating opacity of each letter from left to right:
You could animate each letter's opacity by combining svg's linearGradient and mask and using JavaScript for shifting the x1 and x2 attributes of the linearGradienton mouseover and mouseleave events.
var grad = document.getElementById('gradient');
// higher 'animSpeed' yeilds lower speed
var animSpeed = 20;
var two = document.getElementsByClassName('two')[0];
two.addEventListener('mouseenter', function() {
for (i = 0; i < two.offsetWidth; i++) {
var anim = setTimeout(function() {
var x1 = (parseInt(grad.getAttribute('x1').slice(0, -1), 10) + 1) + '%';
var x2 = (parseInt(grad.getAttribute('x2').slice(0, -1), 10) + 1) + '%';
grad.setAttribute('x1', x1);
grad.setAttribute('x2', x2);
}, animSpeed * i)
}
});
two.addEventListener('mouseleave', function() {
for (i = 0; i < two.offsetWidth; i++) {
var anim = setTimeout(function() {
var x1 = (parseInt(grad.getAttribute('x1').slice(0, -1), 10) - 1) + '%';
var x2 = (parseInt(grad.getAttribute('x2').slice(0, -1), 10) - 1) + '%';
grad.setAttribute('x1', x1);
grad.setAttribute('x2', x2);
}, animSpeed * i)
}
})
<svg>
<defs>
<linearGradient id="gradient" x1="-15%" y1="0%" x2="0%" y2="0%">
<stop stop-color="white" offset="0" />
<stop stop-color="black" offset="1" />
</linearGradient>
<mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect width="1" height="1" fill="url(#gradient)" />
</mask>
</defs>
<foreignObject width="90px" height="100%" x="2" y="12" mask="url(#mask)">
<div class="two">This is a label</div>
</foreignObject>
</svg>
Slide from left to right:
You could transition the transform property.
Updated Fiddle
.two {
display: block;
width: 300px;
padding: 15px;
}
.two:before {
content: "T";
}
.two:hover:before {
display: none;
}
.two:after {
position: absolute;
content: "This is a Label";
transform: translateX(-150%);
transition: transform 1s ease;
}
.two:hover:after {
content: "This is a Label";
transform: translateX(0%);
}
<div class="two"></div>

Answer 2

Reveal letters with :before mask
If you just want to use CSS, we can create a mask which slides over the text and then is pushed to the right to reveal the text in the div.
Example
.two {
width: 100px;
position: relative;
overflow: hidden;
}
.two:before {
content: '';
position: absolute;
left: 0.6em;
top: 0;
height: 100%;
width: 100%;
background: #FFF;
transition: left 1s;
}
.two:hover:before {
left: 100%;
}
.color:before {
background: #F00;
}
<div class="two">This is a Label</div>
It looks like this (hover):
<div class="two color">This is a Label</div>

Answer 3

This is not possible with just the :before and :after psuedo-elements. Let me suggest another similar approach.
/* start SLIDE-IN code */
.two > .capitalT > .else {
position: relative;
left: -100px;
opacity: 0;
transition: left 0.5s, opacity 0.5s;
}
.two > .capitalT:hover > .else {
left: 0;
opacity: 1;
}
/* end SLIDE-IN code */
<div class="two"><span class="capitalT"><span class="t">T</span><span class="else">his is a Label</span></span>
</div>

Answer 4

CSS is not capable to animate auto values in principle. So consider either
.two:hover::after{ width: 100px;}
( http://jsfiddle.net/k2wou9eh/1/ ) or other options.