Еще один красивый список с помощью CSS
galina2601 8-11-2017, 20:31 1 590 Уроки по CSS / СпискиЭтот список тоже весьма интересен.
При наведении на строку, слева, рядом с номером, появляется небольшая стрелка. Плюс сама строка слегка меняет цвет. Да, вы же понимаете, что цветовую гамму можно задать любую.
А сделать такую красоту совсем просто.
Итак, это сам код списка. Абсолютно обычный:
<ol class="rectangle"> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> </ol>
А это набор стилей для списка:
.rectangle {
counter-reset: li;
list-style: none;
font: 14px "Trebuchet MS", "Lucida Sans";
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.rectangle a {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 2.5em;
background: #D3D4DA;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}
.rectangle a:hover {background: #DCDDE1;}
.rectangle a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #9097A2;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle a:after {
position: absolute;
content: "";
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle a:hover:after {
left: -.5em;
border-left-color: #9097A2;
}