Стилизация списков с помощью псевдо-элементов
Стилизация списков с помощью CSS может стать головной болью. Если нужно изменить внешний вид меток пункта списка, то первое, что приходит на ум - свойство list-style: none;
. Но использование свойства list-style-image
может потребовать для себя много времени на попытки позиционировать вычурные метки. В качестве популярной альтернативы вспоминается background-image
для пунктов списка.
li { background: url(images/bullet.png) no-repeat left top; list-style: none; }
Такой подход дает возможность перемещать пункты списка без проблем. Хорошее решение. Но есть три назойливых (хотя и небольших) проблемы для данного метода:
- Нельзя эффективно использовать спрайты, так как возникает проблема со скрытием ненужных областей спрайта.
- Очевидно, что изображение нельзя использовать для нумерованного списка, так как потребуется отдельная картинка для каждого пункта. Конечно, можно сделать большую кучу отдельных изображений. Но такой подход весьма далек от понятия "эффективно".
- Дополнительные запросы HTTP. Данная проблема очень ярко проявляется, когда у вас есть много различных списков.
Но есть способ, который дает возможность обойти проблемы.
Стандартный метод с фоновым изображением
Сначала опишем обычное решение стилизации списка с использованием фоновых изображений.
Необходимый HTML код
<ul class="first-example"> <li>SEO</li> <li>Система управления содержанием</li> <li>Интеграция социальных сетей</li> <li>Выделение пунктов списка</li> </ul>
Необходимый CSS код
.first-example li { background: url(../img/tick.png) no-repeat left 8px; } .first-example li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; }
Код простой. Пункты списка имеют фоновое изображение.
Используем псевдо-элементы
Псевдо-элементы - наши друзья. Они являются дополнительными ускорителями для ракеты проекта. Когда все выглядит скучно и нет способа улучшить внешний вид - используйте псевдо-элементы.
Мы можем использовать псевдо-элементы как метки. Такой подход снимает проблему использования спрайтов, так как для псевдо-элементов можно устанавливать значения для свойств width
и height
и позиционировать фон.
Код HTML
<ul class="second-example"> <li>SEO</li> <li>Система управления содержанием</li> <li>Интеграция социальных сетей</li> <li>Выделение пунктов списка</li> </ul>
Код HTML не изменяется.
Код CSS
li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; position: relative; } ul.second-example li:before { content: ''; background: url(../img/sprite.png) no-repeat left top; height: 20px; width: 20px; position: absolute; left: 0; top: 8px; } ul.second-example li:nth-child(2n):before { background-position: -21px 0; }
Второе изображение используется по двум причинам:
- Даем возможность демонстрации возможностей спрайта в данном случае
- Делает внешний вид списка более стильным
Посмотрим, что будет, если спрайт использовать в первом примере:
Как выглядит список с применением спрайта для псевдо-элементов вы можете посмотреть на демонстрационной странице.
Используем счетчик CSS
Что такое счетчик CSS? Счетчик CSS - функция, которую можно использовать в свойстве content
для псевдо-элемнета. Можно считать все, что угодно. Количество элементов <section>
в статье или заголовков <h2>
, и так далее. В нашем примере мы подсчитываем количество элементов <li>
. Так мы можем динамически передавать псевдо-элемнетам :before/:after числовое значение, которое позволит нумеровать пункты списка.
Свойство CSS counter включено в спецификацию CSS 2.1. Таким образом, оно поддерживается в IE8. Конечно, оно не будет работать в IE7 & IE6, но для них можно просто определить числовой тип list-item-type
.
Код CSS
Код HTML не изменится. А в CSS мы будем использовать часть из предыдущих примеров (чтобы сохранить общий стиль демонстрационной страницы). А остальной код будет выглядеть следующим образом:
ol.third-example { counter-reset: li; } ol.third-example li { position: relative; } ol.third-example li:before { content: counter(li); counter-increment: li; background: #f692bb; color: #333; font: bold 14px/20px sans-serif; height: 20px; text-align: center; width: 20px; position: absolute; left: 0; top: 8px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15); -moz-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15); box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15); }
Примечание: относительное позиционирование пункта списка является необходимым условием, так как псевдо-элемент внутри будет позиционироваться абсолютно.
Для правильного использования функции counter()
нужно три условия:
- Счетчик соответствующих элементов должен быть сброшен
- Счетчику нужно указать шаг увеличения (можно использовать любые значения, в демонстрации применяется значение по умолчанию)
- Функция
counter()
должна размещаться в свойствеcontent
, и ей надо указать, что считать
Первое условие выполняется добавлением свойства counter-reset
к родительскому контейнеру элемента, который надо считать. В значение свойства counter-reset
указывается элемент, который будет подсчитываться. Если вам нужно считать количество параграфов в статье, то счетчик нужно сбросить следующим образом в наборе правил CSS:
body { counter-reset: p; } /* Или */ article { counter-reset: p; }
Затем надо добавить свойство counter-increment
к псевдо-элемнету. Оно указывает, какой элемент считать и насколько увеличивать счетчик.
li:before { counter-increment: li 5; }
В данном примере счетчик увеличивается на 5. По умолчанию используется 1.
В завершении добавляем функцию counter()
в свойство content
псевдо-элемнета, чтобы использовать текущее значение счетчика для формирования содержания.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ZPdxUBkq3Io/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
Кто мало хочет, тот дешево стоит |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp