<ul> <li><a href="#"><span class="bold">Жирный текст</span></a></li> <li><a href="#"><span class="italic">Курсивный текст</span></a></li> <li><a href="#"><span class="underline">Подчёркнутый текст</span></a></li> <li><a href="#"><span class="size">Размер текста</span></a></li> <li><a href="#"><span class="bullet">Маркированный список</span></a></li> <li><a href="#"><span class="number">Нумерованный список</span></a></li> <li><a href="#"><span class="quote">Цитата</span></a></li> <li><a href="#"><span class="left">Выравнивание по левому краю</span></a></li> <li><a href="#"><span class="center">Выравнивание по центру</span></a></li> <li><a href="#"><span class="right">Выравнивание по правому краю</span></a></li> </ul>
li { float: left; list-style: none; margin: 2px; } li a { background: linear-gradient(#fff, #eee); border: 1px solid #ccc; border-radius: 3px; display: block; padding: 3px; } li a:hover { border-color: #999; } li span { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/sprite.png") 0 0 no-repeat; color: transparent; display: block; font: 0/0 a; height: 16px; width: 16px; } .italic { background-position: -16px 0; } .underline { background-position: -32px 0; } .size { background-position: -48px 0; } .bullet { background-position: -64px 0; } .number { background-position: -80px 0; } .quote { background-position: -96px 0; } .left { background-position: -112px 0; } .center { background-position: -128px 0; } .right { background-position: -144px 0; }