Как убрать маркеры списка в HTML с CSS

Маркеры ul/li мешают дизайну и нарушают выравнивание - простое скрытие может ломать отступы и доступность. Разбираем четыре рабочих приёма: list-style: none, псевдоэлементы для кастомных маркеров, обнуление отступов и применение flex/inline‑layout с примерами CSS, чтобы сохранить семантику и корректное позиционирование.

Вы освоите применение конкретного приёма под задачу: CSS правило или псевдоэлемент. В результате получите чистую вёрстку без маркеров при сохранении доступности списка.

Обновлено: 2026-02-02 15:34:17 КК Константин Кондрусинавтор материала

Пример HTML

Добавление стиля "list-style: none" в тег неупорядоченного (<ul>) или упорядоченного списка (<ol>) уберет любые маркеры или номера:

<ul style="list-style: none;">
  <li>Элемент списка без маркера</li>
  <li>Второй элемент</li>
</ul>

Пример HTML с CSS

Приведенный выше пример работает почти в любой ситуации. Но лучше размещать CSS во внешнем файле стилей. Ниже приведены CSS и HTML, которые можно использовать для удаления маркеров.

Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков (<ul>). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:

<style>
  ul {
    list-style-type: none;
  }
</style>

Но лучше создать класс list style none CSS, который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS:

<style>
  .nobull {
    list-style-type: none;
  }
</style>

В приведенном выше коде CSS создается новый класс "nobull". Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:

<ul class="nobull">
  <li>Элемент списка без маркера</li>
  <li>Второй элемент</li>
</ul>

Подсказка: Этот класс можно применить для любого элемента списка (<li>), чтобы скрыть маркер напротив определенных элементов, но оставить другие маркеры.

Вывод примера

Ниже показано, как выводится на экран неупорядоченный список без маркеров с помощью list style type none.

КК Константин Кондрусинавтор статьи «How to create a bullet list with no bullets in HTML»