Коротко: маркер списка убирают свойством list-style: none у ul или li. Если стандартный маркер не нужен, но хочется свой — используют ::marker или добавляют символ через ::before.
Способы убрать маркер
| Задача | Свойство |
|---|---|
| Убрать маркер | list-style: none |
| Сменить тип маркера | list-style-type |
| Заменить своим | ::before |
| Стилизовать стандартный | ::marker |
Убрать маркеры
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}Вместе с list-style: none обычно сбрасывают margin и padding — иначе список останется со сдвигом, который задан браузером по умолчанию.
Вкладки: свои маркеры
li::marker {
color: #003F8F;
font-size: 1.2em;
}::marker стилизует сам маркер — цвет, размер, тип. Поддерживается современными браузерами, но набор свойств ограничен.
.list { list-style: none; padding: 0; }
.list li::before {
content: "✔"; color: #1a7f37; margin-right: 8px;
}Убираем стандартный маркер и рисуем свой символ через ::before. Это самый гибкий способ: можно использовать любую иконку или эмодзи.
ul { list-style-type: square; }
ol { list-style-type: lower-alpha; }Иногда маркер убирать не нужно — достаточно сменить его тип: квадраты, круги, римские цифры, буквы.
Практика: убрать маркер
- Определите, где маркеры мешают.
- Задайте
list-style: none. - Сбросьте
marginиpaddingу списка. - При необходимости добавьте свой маркер через
::before. - Задайте отступ между символом и текстом.
- Проверьте читаемость списка.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Список со сдвигом | не сброшены отступы | margin: 0; padding: 0 |
| Маркер всё виден | правило не применилось | усилить селектор |
| Свой символ слипается | нет отступа | margin-right |
::marker не работает |
старый браузер | использовать ::before |
| Список стал нечитаемым | убрали всё оформление | оставить отступы |
Проверьте себя
Вопросы и ответы
Маркер убран, но браузерные отступы остались. Добавьте margin: 0 и padding: 0 — тогда список встанет ровно.
::marker стилизует настоящий маркер, поэтому вёрстка проще. Но настроек меньше, а поддержка в старых браузерах ограничена — тогда выручает ::before.
Да, в меню и списках ссылок точки лишние: они мешают восприятию навигации. Но в текстовых списках маркеры полезны — они помогают читать.
Через list-style-image: url("marker.png") или в ::before с background-image. Второй способ гибче — можно управлять размером и положением.
Итоги
- Маркер убирает
list-style: none. - Вместе с ним сбрасывают
marginиpadding. - Свой маркер делают через
::markerили::before. - В текстовых списках маркеры лучше оставить.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.