ランダムな色の境界線の下：after要素

Question

私のナビゲーション内のリンクには、ランダムな色を適用したいボーダーボトムホバーアニメーションがあります。 Thisこれまでに全体のコードですが、私は特にこれに言及しています：

#navigation li a:after { 
    content: ''; 
    display: block; 
    border-bottom: 2px solid #000; 
    width: 0; 
    position: absolute; 
    left: 0; 
    -webkit-transition: 0.6s ease; 
    transition: 0.6s ease; 
} 

#navigation li a:hover:after { 
    width: 100%; 
} 

の代わりに「のborder-bottom：2ピクセル固体＃000」、私はランダムにボーダーのための希望配列（＃ff86b1、＃d162ff、＃9cbdff、＃4fff4fの場合は違いがあります）からの色です。残念ながら、私は特にこれをやろうとしている誰かを見つけることができませんでしたので、どんな指針も高く評価されます。

Answer 1

次のjQueryコードを使用します

$("#navigation li a").each(function(){ 
var colors = ["#CCCCCC","#333333","#990099"]; //include your own colors 
var rand = Math.floor(Math.random()*colors.length); 
$(this).css("borderColor", colors[rand]); 
}); 

Answer 2

このためには、いくつかのjavascriptコードを記述する必要があります。 私はjQueryを使ってこれを行っていますので、プロジェクトにjQuery Liberaryを含める必要があります。

https://jsfiddle.net/452LLs8e/2/

更新CSSである：{ テキスト装飾：なし } #navigation { マージン：0自動。 幅：100％; オーバーフロー：非表示。 margin-top：20px; 位置：相対; 行の高さ：24ピクセル; }

#navigation ul { 
width: 900px; 
margin: 0 auto; 
list-style:None; 
} 

#navigation li { 
display: inline-block; 
padding: 0px 50px 0px 20px; 
list-style:None; 
vertical-align: super; 
font-size: 20px; 
color: #000; 
text-align:center; 
} 

#navigation li a { 
font-size: 9px; 
    text-transform:uppercase; 
    letter-spacing:1px; 
    display:block; 
    position:relative; 
margin-bottom:-8px; 
letter-spacing:2px; 
color:#000; 
} 

#navigation li a:after { 
    content: ''; 
    display: block; 
    border-bottom: 2px solid; 
    border-color: inherit; 
    width: 0; 
    position: absolute; 
    left: 0; 
    -webkit-transition: 0.6s ease; 
    transition: 0.6s ease; 
} 

#navigation li a:hover:after { 
    width: 100%; 
} 

Javascriptのコード：

var arrColor=['#ff86b1', '#d162ff', '#9cbdff', '#4fff4f']; 

var randIdx=parseInt(Math.random()*arrColor.length); 

$('#navigation li a').css('border-color',arrColor[randIdx]); 
console.log(arrColor[randIdx]);