Li marker size css

Свойства списков

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

В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

Табл. 1. Свойства CSS для управления видом списка

Свойство	Значение	Описание	Пример
list-style-type	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none	Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного.	LI LI
list-style-image	none URL	Устанавливает символом маркера любую картинку.	LI
list-style-position	outside inside	Выбор положения маркера относительно блока строк текста.	LI
list-style	Универсальное свойство, включает одновременно все вышеперечисленные свойства.

или
, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL , так и для селектора LI . Так, в примере 1 используется селектор UL , для него и задаются стилевые параметры.

Пример 1. Создание маркированного списка

Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

Рис. 1. Вид списка, измененого с помощью стилей

Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

Пример 2. Использование изображений в качестве маркера

Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

Рис. 2. Изображения в качестве маркеров

Некоторые примеры создания различных списков приведен в табл. 2.

• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста

• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста

• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста

Нумерованный список с арабскими цифрами:

Нумерованный список со строчными римскими цифрами:

Нумерованный список с заглавными римскими цифрами:

Нумерованный список со строчными буквами латинского алфавита:

Нумерованный список с заглавными буквами латинского алфавита:

Источник

Пользовательские маркеры с помощью CSS ::marker

Теперь можно легко настроить цвет, размер и тип пункта или маркера при использовании &LTul> или &LTol>.

Благодаря Igalia при поддержке Bloomberg мы наконец-то можем избавиться от костылей для стилей списков. Посмотрите!

Благодаря селектору CSS ::marker мы можем изменять содержимое и некоторые стили маркеров и чисел.

Совместимость с браузерами #

::marker поддерживается в Firefox для настольных компьютеров и Android, Safari для настольных компьютеров и iOS (только свойства color и font-* , см. ошибку 204163), а также в браузерах для настольных компьютеров и Android на базе Chromium. См. обновления в таблице совместимости с браузерами MDN.

Псевдоэлементы #

Рассмотрим следующий базовый маркированный список HTML:

ul> 
li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li> 
li>Dolores quaerat illo totam porro</li> 
li>Quidem aliquid perferendis voluptates</li> 
li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li> 
li>Fuga</li>
</ul>

В результате получается такой ожидаемый рендеринг:

Точка в начале каждого элемента &LTli> является произвольной! Браузер рисует и создает за вас сгенерированную рамку маркера.

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

Ключевой термин

Псевдоэлемент представляет элемент в документе, отличный от тех, которые существуют в дереве документа. Например, вы можете выбрать первую строку абзаца с помощью псевдоэлемента p::first-line , даже если нет HTML-элемента, обертывающего эту строку текста.

Создание маркера #

Блок псевдоэлемента маркера ::marker автоматически создается внутри каждого элемента списка перед фактическим содержимым и псевдоэлементом ::before .

li::before  
content: "::before"; 
background: lightgray; 
border-radius: 1ch; 
padding-inline: 1ch; 
margin-inline-end: 1ch;
>

Обычно элементы списка являются элементами HTML &LTli> , но другие элементы также могут стать элементами списка с помощью display: list-item .

dl> 
dt>Lorem</dt> 
dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd> 
dd>Dolores quaerat illo totam porro</dd>
 
dt>Ipsum</dt> 
dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd 
 display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
>

Стилизация маркера #

До ::marker списки можно было стилизовать с помощью list-style-type и list-style-image , чтобы изменить символ элемента списка с помощью одной строки CSS:

li  
list-style-image: url(/right-arrow.svg); 
/* ИЛИ */ 
list-style-type: '👉'; 
padding-inline-start: 1ch;
>

Это удобно, но нам нужно больше. А как насчет изменения цвета, размера, интервала и т. д. Вот где на помощь приходит ::marker . Он позволяет индивидуально и глобально выбирать эти псевдоэлементы из CSS:

li::marker  
color: hotpink;
>

li:first-child::marker  
font-size: 5rem;
>

Если в приведенном выше списке нет розовых маркеров, значит, ::marker не поддерживается вашим браузером.

Свойство list-style-type дает очень ограниченные возможности для стилизации. Псевдоэлемент ::marker означает, что можно настроить таргетинг самого маркера и применить стили непосредственно к нему. Это дает гораздо больший контроль.

Тем не менее, вы не можете использовать все свойства CSS для ::marker . Список разрешенных и запрещенных свойств четко указан в спецификации. Если вы экспериментируете с этим псевдоэлементом, а результата нет, ознакомьтесь с приведенным ниже списком — он описывает, что можно и что нельзя сделать с помощью CSS:

Допустимые свойства CSS для ::marker #

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Изменение содержимого ::marker выполняется с помощью content вместо list-style-type . В следующем примере для первого элемента используется стиль list-style-type , а для второго — ::marker .Свойства в первом случае применяются ко всему элементу списка, а не только к маркеру, что означает, что текст анимируется так же, как и маркер. При использовании ::marker мы можем выбирать только блок маркера, а не текст.

Также обратите внимание на то, что отключенное свойство background не действует.

Будущие стили псевдоэлементов #

Вы можете узнать больше о :: marker здесь:

Источник

CSS-стили для маркированных списков

Вид маркера можно задать через CSS свойство list-style-type :

Возможны следующие значения:

Цвет и размер стандартного маркера

Цвет стандартного маркера задается через псевдосвойство ::marker :

Результат:

Поддержка ::marker в браузерах

Маркеры PNG, JPG

Вставка изображения marker.png через свойство list-style-image :

Результат:

Вставка изображения через свойство background :

Результат:

Маркеры SVG

Изображение marker.svg можно вставить через свойство list-style-image . Размер изменяется с помощью font-size в псевдосвойстве ::marker .

.markers < margin: 0 0 20px 14px; padding: 0; >.markers li < list-style-image: url(/marker.svg); margin: 7px 0; >.markers li::marker

Результат:

Если вставить изображение через свойство background , размер SVG можно изменить с помощью свойства background-size .

Результат:

Маркеры символами эмодзи

Вместо маркера можно вставить любой символ, используя свойство list-style-type :

Результат:

Чтобы задать свой символ каждому элементу списка нужно использовать правило@counter-style:

@charset "UTF-8"; @counter-style marker-emoji < system: cyclic; symbols: "🍋" "🍎" "🍒"; suffix: " "; >.markers < margin: 0 0 20px 24px; padding: 0; list-style-type: marker-emoji; >.markers li

Маркеры иконочными шрифтами Material

@charset "UTF-8"; @counter-style marker-font < system: cyclic; symbols: "arrow_forward"; suffix: " "; >.markers < margin: 0 0 20px 24px; padding: 0; list-style-type: marker-font; >.markers li::marker < font-family: 'Material Icons'; color: red; line-height: 1; font-size: 14px; >.markers li

Результат:

@charset "UTF-8"; @counter-style marker-emoji < system: cyclic; symbols: "arrow_forward" "add" "star_rate"; suffix: " "; >.markers < margin: 0 0 20px 24px; padding: 0; list-style-type: marker-emoji; >.markers li::marker < font-family: 'Material Icons'; color: red; line-height: 1; font-size: 14px; >.markers li < margin: 7px 0; font-size: 14px; >.markers li:before

Результат:

Комментарии 2

Роман

Роман

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Несколько примеров как задать стили у нумерации списков с применением счетчика counter и псевдоэлемтов :before и.

Элементы dl, dt, dd предназначенных для создания списка определений. dl – общий контейнер, dt – термин, dd –.

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

С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf — это конвертер HTML в PDF который.

Источник