Содержание

Оформление списков ul li для информационных блоков

.list4a {

    padding:0;

    list-style: none;

    counter-reset: li;

}    

.list4a li {

    position: relative;

    padding:12px 20px 20px 28px;

    margin-left: 40px;

    transition-duration: 0.3s;

}

.list4a li:before {

    border: 6px solid transparent;

    line-height: 30px;

    position: absolute;

    top: 0;

    left:-30px;

    width:42px;

    text-align:center;

    font-size: 13px;

    font-weight: bold;

    color: #77AEDB;

    counter-increment: li;

    content: counter(li);

    transition-duration: 0.3s;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;    

    }

.list4a li:hover:before {

    color: #337AB7;    

}

.list4a li:after {

    position: absolute;

    top: 0;

    left: -30px;

    width: 42px;

    height: 42px;

    border: 6px solid #3399FF;

    border-radius: 50%;

    content: »;

    opacity: 0. 5;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;    

}

.list4a li:hover:after {

    animation: 500ms ease-in-out 0s bounceIn;

    opacity: 1;

}    

 

@keyframes bounceIn {

    0% {

        opacity: 0;

        transform: scale3d(.3, .3, .3);

    }

    20% {

        transform: scale3d(1.3, 1.3, 1.3);

    }

    40% {

        transform: scale3d(.9, .9, .9);

    }

    60% {

        opacity: 1;

        transform: scale3d(1.03, 1.03, 1.03);

    }

    80% {

        transform: scale3d(.97, .97, .97);

    }

    to {

        opacity: 1;

        transform: scale3d(1, 1, 1);

    }

}

Красивое оформление списков на CSS3