Use of before & after attributes. We have used list class in
this following example:
HTML
<html>
<head></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>
</html>
CSS
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;
}
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;
Hiç yorum yok:
Yorum Gönder