Список с настраиваемым маркером

Список с настраиваемым маркером

Owebs
25 августа 2022
Просмотры 94
Рейтинг
Время чтения Время чтения: 3 минуты

Оглавление
Развернуть Свернуть
  1. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, consequuntur.
  2. Lorem ipsum dolor sit amet consectetur.
  3. Lorem ipsum dolor sit amet consectetur.
  4. Lorem ipsum dolor sit amet consectetur.
  5. Lorem ipsum dolor sit amet consectetur.
  6. Lorem ipsum dolor sit amet consectetur.
  7. Lorem ipsum dolor sit amet consectetur.

Списки являются неотъемлемыми элементами каждого сайта. И разработчиками w3c предусмотрен определенный стандартный функционал, за пределы которого, редко кто выходит. Как правило, списки используют в качестве ненумерованного или нумерованного вертикального/горизонтального перечисления контента. И стилизуют обычно только текст или маркеры. По этой причине списки приедаются и не выделяются таким образом, чтобы привлечь гостей сайта. В этом уроке мы с вами оформим наш список нестандартным образом. А что, если вместо стандартных (1, 2, 3, 4...) мы хотим, чтобы наш список маркировался как (пункт 1:, пункт 2: и т.д.) ? Давайте попробуем этого добиться. Также сделаем стиль шрифта и цвет маркера отличным от контента списка.

Для создания списка с настраиваемым маркером вам надо перекопировать следующие части кодов:

HTML:
                <ol class="special_markers">
                    <li>
                        Lorem ipsum dolor sit.
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, consequuntur.
                    </li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                </ol>

            
CSS:
                .special_markers {
                    max-width: 500px;
                    padding-right: 7px;
                }
                .special_markers li {
                    counter-increment: SpecialMarker;
                    margin-bottom: 15px;
                    list-style: none;
                    color: cadetblue;
                }
                .special_markers li::before {
                    content: "пункт " counter(SpecialMarker) ": ";
                    font-family: cursive;
                    font-weight: 700;
                    font-size: 24px;
                    color: red;
                    margin-right: 10px;
                }
            

После копирования вышеупомянутых кусков кода у вас должен появиться такой список:

  1. number1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, consequuntur.
  2. number2
  3. number3
  4. number4
  5. number5
  6. number6
  7. number7

Наш список готов. Для корректной работы маркеров списка рекомендуем не менять класс тега ol и не вносить изменения в селекторе CSS: .special_markers li::before {}, если не обладаете опытом работы со свойством content.

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

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

Согласен