使用CSS悬停时更改/轻推文本位置

Question

我正在制作一个看起来像这样的菜单http://exclusivelyhistailoring.com/请注意，当链接悬停时，文本会向右移动并改变颜色。

未发现的州

悬停状态

这是我到目前为止所拥有的：

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

有什么想法吗？

Answer 1

这是一个Flash文件，因此要创建类似于使用CSS的内容，您需要的是text-indent属性或padding-left，无论您使用什么......

我从头开始制作以下演示..

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