Сайт веб-мастера Александра Климова
Меню

Стилизация списков

Стилизация маркеров

Рассмотрим такой элемент HTML, как список.

Начнем с азов. Простейший список реализуется при помощи тегов ul и li:


<ul>
  <li>Рыжик</li>
  <li>Мурзик</li>
  <li>Барсик</li>
</ul>

Выглядит список так:

  • Рыжик
  • Мурзик
  • Барсик

Убираем нумерацию, поля и отступы из упорядоченного списка:


<style>
ol{
    list-style: none; 
    margin: 0; 
    padding: 0;
}
ol  li{
    clear: both; 
    margin: 0 0 10px 0; 
    padding: 0;
}
</style>

<ol>
  <li>Рыжик</li>
  <li>Мурзик</li>
  <li>Барсик</li>
  <li>Васька</li>
</ol>
  1. Рыжик
  2. Мурзик
  3. Барсик
  4. Васька

Стилизация маркеров

Если нам не нравятся черные кружочки у списка, то с помощью стиля list-style-type: square меняем их на чёрные квадратики.

  • Рыжик
  • Мурзик
  • Барсик

Если вам не нравятся и чёрные квадратики, то можете использовать белые кружочки при помощи стиля list-style-type: circle.

  • Рыжик
  • Мурзик
  • Барсик

В некоторых случаях удобнее нарисовать свой маркер и использовать его в списках. Для этого нам понадобится стиль list-style-image: url (image_filename). Например, мы хотим использовать в качестве маркера звёздочку:

  • Рыжик
  • Мурзик
  • Барсик

Благодаря CSS-счётчикам мы можем стилизовать маркеры через псевдоэлементы. Сначала удаляем list-style, затем к маркерам применяются счётчики псевдоэлементов.


#awesome {
  list-style: none;
  counter-reset: my-awesome-counter;
}
#awesome > li {
  counter-increment: my-awesome-counter;
  margin: 0.25rem;
}
#awesome > li::before {
  content: counter(my-awesome-counter);
  background: #6699ff;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-block;
  line-height: 2rem;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
}

<ol id="awesome">
  <li>Рыжик</li>
  <li>Мурзик</li>
  <li>Барсик</li>
  <li>Васька</li>
</ol>
  1. Рыжик
  2. Мурзик
  3. Барсик
  4. Васька

Также можно сделать многоуровневый список по этой технике.

Реклама