css3在悬停时转换为before内容

Question

大家好，对不起我的英语，标题似乎不太明显。这是我要做的。我有一个导航如下：

<nav>
        <ul>
            <li><a href=""><?php echo __("accueil"); ?></a></li>
            <li><a href=""><?php echo __("biographie"); ?></a></li>
            <li><a href=""><?php echo __("agenda"); ?></a></li>
            <li><a href=""><?php echo __("archives"); ?></a></li>
            <li><a href=""><?php echo __("programmes"); ?></a></li>
        </ul>
</nav>

我希望悬停在每个导航链接的左侧附加一个箭头。到目前为止，这是我的css：

nav li a{
    color: #747474;
    font-size: 16px;
    text-transform: capitalize;
}
nav li:hover:before{
    content: '> ';
    color: #fff;
}

这个代码正在运行，但我试图为这个箭头幻影添加一个过渡，使其看起来更平滑，而不是以残酷的方式出现。不幸的是，我失败了，我甚至不知道这是否可能。还有其他方法，但由于我面临这个问题，我想扩展我的知识，了解如何使这项工作发挥作用。

提前感谢大家的帮助！

Answer 1

试试这个：
HTML:

<nav>
    <ul>
        <li><span>></span><a href="">aaa</a></li>
        <li><span>></span><a href="">bbb</a></li>
        <li><span>></span><a href="">ccc</a></li>
        <li><span>></span><a href="">ddd</a></li>
        <li><span>></span><a href="">eee</a></li>
    </ul>
</nav>  

CSS：

nav li a{
    color: #747474;
    font-size: 16px;
    text-transform: capitalize;
}  

JS:

$(document).ready(function(){
    $('li').find('span').hide();
    $('li').mouseenter(function(){
        $(this).find('span').fadeIn('slow');
    }).mouseout(function(){
        $(this).find('span').fadeOut('slow');
    });
});  

JSFIDDLE演示