CSS sorted list styling

HTML
<ol class="rounded-list"> <li><a href="">Первый пункт списка</a></li> <li><a href="">Второй пункт списка</a></li> <li><a href="">Третий пункт списка</a> <ol> <li><a href="">Первый подпункт списка</a></li> <li><a href="">Второй подпункт списка</a></li> <li><a href="">Третий подпункт списка</a></li> </ol> </li> <li><a href="">Четвертый пункт списка</a></li> <li><a href="">Пятый пункт списка</a></li> </ol> <ol class="rectangle-list"> <li><a href="">Первый пункт списка</a></li> <li><a href="">Второй пункт списка</a></li> <li><a href="">Третий пункт списка</a> <ol> <li><a href="">Первый подпункт списка</a></li> <li><a href="">Второй подпункт списка</a></li> <li><a href="">Третий подпункт списка</a></li> </ol> </li> <li><a href="">Четвертый пункт списка</a></li> <li><a href="">Пятый пункт списка</a></li> </ol>
CSS
body{ background: #000000; margin: 40px auto; } /* -------------------------------------- */ ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); margin-left: 400px; width: 500px; } ol ol{ margin: 0 0 0 2em; } /* -------------------------------------- */ .rounded-list a{ position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .rounded-list a:hover{ background: #eee; } .rounded-list a:hover:before{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } .rounded-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } /* -------------------------------------- */ .rectangle-list a{ position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 2.5em; background: #ddd; color: #444; text-decoration: none; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .rectangle-list a:hover{ background: #eee; } .rectangle-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -2.5em; top: 50%; margin-top: -1em; background: #fa8072; height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; } .rectangle-list a:after{ position: absolute; content: ''; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.5em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .rectangle-list a:hover:after{ left: -.5em; border-left-color: #fa8072; }
JAVASCRIPT
Expand for more options Login