Случайный цвет border-bottom in: after element

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

Вместо «границы дна: 2px твердых # 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 libary в свой проект.

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

Обновленный CSS является: а { текст-отделка: нет } #navigation { маржа: 0 авто; ширина: 100%; переполнение: скрыто; margin-top: 20px; позиция: относительная; line-height: 24px; }

#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]);