sliderの左右のボタンに色をつけたいです。

前提・実現したいこと

該当のソースコード

HTML
<!doctype html>
<html lang="ja">
<head>
 
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script src="js/main.js"></script>

</head>
<body>
 
<ul class="slider">
    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image01"></a></li>
    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image02"></a></li>
    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image03"></a></li>
    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image04"></a></li>
    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image05"></a></li>
    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image06"></a></li>
    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image07"></a></li>
    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image08"></a></li>
</ul>

</body>
</html>

CSS
*{
box-sizing: border-box;
}

.slider{
    margin: 100px auto;
    width: 500px;
}
.slider img{
    height: auto;
    width: 500px;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: black;
}

JS
$(function(){
    $('.slider').each(function(){
		$(this).slick({
			autoplay:true,
			autoplaySpeed:3000,
			dots:true,
		});
	});	
});

試したこと

とあるサイトを参考にしながらslick sliderを作成してみました。
ただ、prevとnextのbuttonに色をつけて可視化したいのですが、透明な状態から抜け出せません。
どうかご教授ください。。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

ベストアンサー

CSSはreset.cssとstyles.cssの2つあるようですが1つしかありませんでした。
.slick-prev:before,.slick-next:before {color: black;}としているのがstyles.cssだとすると（エスパー回答ですが）cdn.jsdelivr.netのCSSの後ろに持っていけばいいかと思いました。
cdn.jsdelivr.netのcssがstyles.cssの設定を上書きしていると思いました。
とあるサイトがどこかを書かれたほうがいいです。

html
1<!doctype html>
2<html lang="ja">
3<head>
4
5<link rel="stylesheet" href="css/reset.css">
6
7<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css">
8<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css">
9
10<link rel="stylesheet" href="css/styles.css">
11
12<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
13<script type="text/javascript" src="js/slick.min.js"></script>
14<script src="js/main.js"></script>
15
16</head>
17<body>
18
19<ul class="slider">
20    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image01"></a></li>
21    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image02"></a></li>
22    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image03"></a></li>
23    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image04"></a></li>
24    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image05"></a></li>
25    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image06"></a></li>
26    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image07"></a></li>
27    <li><a href="#"><img src="http://placehold.jp/500x500.png" alt="image08"></a></li>
28</ul>
29
30</body>
31</html>