Zufällige Farbe border-bottom in: nach Element

Question

Die Links in meiner Navigation haben eine Rand-unten-Hover-Animation, auf die ich zufällige Farben anwenden möchte. This ist der gesamte Code so weit, aber ich beziehe mich speziell auf diese:

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

Statt „border-bottom: 2px solide 000 #“ Ich möchte mich für die Grenze ein zufällig zu sein Farbe aus einem Array (# ff86b1, # d162ff, # 9cbdff und # 4fff4f, wenn das einen Unterschied macht). Leider konnte ich niemanden finden, der dies speziell versucht, daher wären alle Hinweise sehr willkommen.

Answer 1

Verwenden Sie den folgenden jQuery-Code:

$("#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

Dafür müssen Sie etwas JavaScript-Code schreiben. Ich habe es mit jQuery getan, so müssen Sie jQuery Liberary in Ihrem Projekt enthalten.

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

Aktualisiert CSS ist: a { text-decoration: none } #navigation { margin: 0 auto; Breite: 100%; Überlauf: versteckt; Rand oben: 20px; Position: relativ; Zeilenhöhe: 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-Code:

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