<head>
<style>
a{text-decoration:none; color:pink;}
/*a:hover{background-color:white;}*/
.customStyle:hover{
background-color:gray;
transition-duration:0.4s;
color:red;
}
/*li span{color:red;}*/
li span{width:600px; text-indent:1em; display:inline-block;}
li span:hover{color:black !important;}
ul
{
list-style: none;
padding:3;
margin:10;
}
li
{
padding-left: 5em;
text-indent: -.em;
}
li:before
{
content: "• ";
color: red; /* or whatever color
you prefer */
}
li:hover:before{
content:" ○";
color:white ;
}
li:after{
content:" •";
color:green;
}
li:hover:after{
content:" ○";
color:white;
}
</style>
</head>
<body style="background-color:#272822">
<ul>
<a href=""><li class="customStyle"><span>Anasayfa</span></li></a>
<a href=""><li
class="customStyle"><span>Kitaplar</span></li></a>
<a href=""><li class="customStyle"><span>Yazarlar</span></li></a>
</ul>
</body>
