Уроки CSS

Списки <li> и стили в CSS

Иногда может возникнуть необходимость (желание) изменить стандартный тип маркеров.

Ниже представлен простой пример, как с помощью стиля можно задать некоторый свой стиль маркера.

Сначала убираем маркеры у списка, а потом присваиваем новый.

 <style>
 ul.my_list li {
  list-style-type: none; 
 }
  ul.my_list li:before  {
  content: "> ";  
 }
  </style>
  
  <ul class="my_list">
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
  </ul>

• Один
• Два
• Три
• Четыре

Но это может показаться не особо красивым. По этому актуально вместо обычных маркеров назначить какое-нибудь изображение. Картинка, естественно, должна быть маленького размера.

В примере будет подключена маленькая стрелка, нарисованная в программе "Paint".

 <style>
 ul.img_list {
 list-style: url(images/strelka.png);
 }
  </style>
  
  <ul class="img_list">
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
  </ul>

• Один
• Два
• Три
• Четыре

◄ Предыдущий урок

Содержание

Следующий урок ►