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 - 我敢肯定，這個代碼可以被清理或擊敗，但我沒有找到這對堆棧溢出的例子/答案了所以我想我會添加這個。