Маркеры списка

Плитки Список Обзор

Количество символов: 114 Больше информации...

Маркеры списка

Маркеры списка «галочки»

Маркеры списка «стрелки»

Маркеры списка «Эмоджи»

Маркеры списка

Маркеры списка «галочки»

Маркеры списка «стрелки»

Маркеры списка «Эмоджи»

Генератор красивых никнеймов

Надоело, что никнейм в игре или соцсетях не привлекает внимания? Сгенерируй себе уникальный никнейм!

Сгенерировать никнейм

Как и многие другие наши подборки, эта предназначена для украшения текста. На этот раз мы предлагаем вам символы для стильного оформления списков. Тут есть:

Геометрические фигуры разных форм, цветов и размеров.
Стрелки и прочие указатели. Все направлены вправо.
Большие жирные галочки.
Замысловатые орнаменты.
И даже ваши любимые эмоджи.

Всё это вы можете копировать и вставлять в текстовые редакторы или сообщения в социальных сетях. И конечно это нужно применять при вёрстке веб-сайтов.

Как сделать свой маркер списка в HTML

Маркером можно сделать практически любой значок (из тех, которые отрисовываются шрифтом). Для этого к тегу <li> применяется псевдоэлемент ::before. Покажу на примере.

HTML

<ul class="plan_na_jizn">

<li>Во-первых не сдаваться и не отступать.</li>

<li>Во-вторых всё пролюбить и улыбаться.</li>

<li>В-третьих найти и снова потерять.</li>

<li>В-четвёртых отступать и сдаваться.</li>

</ul>

CSS

/* убираем то, что есть по-умолчанию */

.plan_na_jizn { list-style-type: none; }

/* добавляем своё */

.plan_na_jizn li::before { content: "\2765"; }

Вот это «\2765» css код повёрнутого сердца, который написан на его странице во вкладке «Техническая информация». И теперь оно у нас будет вместо точек.

Во-первых не сдаваться и не отступать.
Во-вторых всё пролюбить и улыбаться.
В-третьих найти и снова потерять.
В-четвёртых отступать и сдаваться.

Совсем не обязательно ограничиваться значками из этой коллекции. Посмотрите соседние наборы. В Юникоде огромное количество символов способных послужить той же цели.