11 Aralık 2015 Cuma

modifying list items with HTML / CSS

<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>

Hiç yorum yok:

Yorum Gönder