CSS箭头不透明度转换

Question

如何将我拥有的CSS箭头（请参见下文）在您悬停在每个项目上时淡入和淡出？

我的CSS：

#menu li { 
    position:relative; 
} 

#menu li a:after { 
    content: " ."; 
    display: block; 
    text-indent: -99em; 
    border-bottom: 0.6em solid #1c525a; 
    border-left: 0.6em solid transparent; 
    border-right: 0.6em solid transparent; 
    border-top: none; 
    height: 0px; 
    margin-left: -.6em; 
    margin-right: auto; 
    margin-top: -7px; 
    position: absolute; 
    left: 50%; 
    width: 1px; 
} 

所有代码都可以in a jsFiddle。

Answer 1

要做到这一点，我添加了以下内容：

#menu li a:after { 
    -webkit-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 

#menu li:hover a:after { 
    border-bottom: 0.6em solid #1c525a; 
    -webkit-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 

See the jsFiddle - 我敢肯定，这个代码可以被清理或击败，但我没有找到这对堆栈溢出的例子/答案了所以我想我会添加这个。