Добавление разделителя между элементами списка в HTML

Быстрый ответ

Чтобы вставить вертикальную черту в качестве разделителя, применяется псевдоэлемент ::after в CSS c значением content: '|'. Для отсутствия разделителя у последнего элемента используется псевдокласс :not() в сочетании с :last-child.

Вот пример:

ul li:not(:last-child)::after {
  content: '|';
  padding: 0 5px;
}

Так, разделители будут появляться между элементами списка, но не после последнего в неупорядоченном списке.

Если элементы списка переносятся на следующую строку

Оптимальное решение в случае, когда элементы списка не умещаются в одну строку, – обратиться к CSS, прежде чем прибегать к JavaScript:

• Flexbox: Присвойте стиль ul display: flex и для li используйте flex-wrap: wrap, чтобы элементы корректно переносились на новую строку. Это не сразу решает вопрос с разделителями, но упрощает управление отступами.

• Управление переполнением: Присвоение overflow: hidden списку ul и использование отрицательных отступов поможет скрыть лишние разделители.

Очень сложные задачи требуют применения JavaScript или jQuery для коррекции отображения разделителей в зависимости от размеров контейнера и отслеживания события window.resize.

Использование псевдоэлементов и flexbox для добавления разделителей

Псевдоэлементы ::before и ::after открывают широкие возможности для креативности, позволяя вставлять дополнительные содержимое без изменения HTML. Несмотря на то что они изначально не предназначены для управления переносами текста, при грамотном использовании могут стать отличным инструментом.

• Визуальная корректировка: Отрегулируйте для элементов li необходимые margin или padding.

Совместимость старых браузеров и адаптация под новые

Один из важных аспектов в работе с CSS – совместимость с различными браузерами. Даже старые и проблемные, такие как IE8, заслуживают внимания и поддержки, учитывая их распространенность.

• Viewport и Media Queries: Примените vh, vw и медиа-запросы для корректного отображения на разных размерах экрана.

• Максимальная ширина: Применение свойства max-width к контейнеру ul позволит контролировать его ширину и избегать проблем с переносом текста на маленьких экранах.

• Поддержка IE8: Если вам требуется поддержка IE8, вы можете использовать JavaScript или создать специальные CSS-стили.

Избегание распространенных ошибок

Есть ряд ошибок, которые важно избегать при создании стилизованных списков с использованием разделителей:

• Неуместные границы: Следите, чтобы не добавить лишние границы к элементам li.

• Динамическая ширина: Используйте относительные размеры и адаптивные размеры вместо фиксированных значений.

• Стандартное отображение списка: Не забудьте убрать дефолтные маркеры, применив list-style: none, перед началом стилизации.

Ресурсы для ознакомления

Ниже – полезные ресурсы для изучения обсуждаемых вопросов:

• CSS-Tricks — обширный объем информации о CSS, включая псевдоклассы, flexbox и многие другие вещи.

• MDN: :last-child — официальная документация по псевдоклассу :last-child.

• Flexbox Guide | CSS-Tricks — полный гид по Flexbox.

• Positioning Content | Learn to Code HTML & CSS — если у вас возникают сложности с позиционированием, данное руководство поможет вам.

Визуализация

Вот так это работает:

📚⏸📚⏸📚⏸📚 // Каждая книга сопровождается разделителем
📚                // Но эта книга выглядит великолепно сама по себе

Чтобы убрать разделитель у последнего элемента, мы используем:

li:not(:last-child)::after { content: "|"; }

Таким образом между элементами списка появляется разделитель:

📚⏸📚 // Две дружноватых книги
📚    // И одна книга, предпочитающая уединение

Если перевести это на язык неупорядоченного списка, выглядит это так:

- Пункт 1 |
- Пункт 2 |
- Пункт 3

Таким образом, в мире списков каждый элемент получает заслуженное внимание.

Полезные материалы

1. Глубокое погружение в псевдоклассы | CSS-Tricks — Уроки по CSS-псевдоклассам для профессионального управления каждым элементом списка.
2. :last-child – CSS: Каскадные таблицы стилей | MDN — Обучающие материалы по псевдоклассу :last-child от заслуживающего доверия источника MDN.
3. Полное руководство по Flexbox | CSS-Tricks — Всё, что следует знать о Flexbox, собрано в одном месте.
4. Позиционирование содержимого – Учимся кодированию на HTML & CSS — Практическое руководство по позиционированию с помощью CSS.