Change / Nudge text position when hovered using CSS

Question

I'm making a menu that looks like this one http://exclusivelyhistailoring.com/ Notice how when a link is hovered, the text moves its way to the right and changes colors too.

Unhovered State

Hovered State

Here's what I have so far :

.text-glow {
    font-size:4em;
    color: #FFFFFF;
    font-family:Arial!important;
    -webkit-stroke-width: 6.3px;
    -webkit-stroke-color: #FFFFFF;
    -webkit-fill-color: #FFFFFF;
    text-shadow: 1px 0px 20px white;
    -webkit-transition: width 0.9s;
    /*Safari & Chrome*/
    transition: width 0.9s;
    -moz-transition: width 0.9s;
    /* Firefox 4 */
    -o-transition: width 0.9s;
    /* Opera */
}

.text-glow:hover, .text-glow:focus .text-glow:active {
    color: transparent;
    text-shadow: 0 0 5px #000;
}

Any ideas?

Answer 1

That's a flash file, so to create something similar to that using CSS, what you will need is text-indent property or padding-left, whatever you are fine with..

I've made the below demo from scratch..

Demo

html, body {
    height: 100%;
    background: #FF9000;
}

ul {
    margin: 20px;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
}

ul li {
    margin-bottom: 5px;
    text-shadow: 0 0 10px #fff;
    color #000;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

ul li:hover {
    color: #fff;
    text-indent: 15px;
}

a {
    color: inherit;
    text-decoration: none;
}