Списки ul

Через псевдоэлемент before

Первый пункт списка
Второй пункт списка
Третий пункт списка
Четвёртый пункт списка

HTML

<ul class="custom-list-sq">
  <li>Первый пункт списка</li>
  <li>Второй пункт списка</li>
  <li>Третий пункт списка</li>
  <li>Четвёртый пункт списка</li>
</ul>

CSS

.custom-list-sq {
  list-style: none;
}

.custom-list-sq li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.custom-list-sq li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background-color: #6A8DDB;
}

Через свойство list-style-image

Элемент списка 1
Элемент списка 2
Элемент списка 3

HTML

<ul class="custom-list-marker">
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ul>

CSS

.custom-list-marker {
  padding-left: 28px;
}

.custom-list-marker li {
  list-style-image: url('https://kak-eto-verstat.ru/images/round.svg');
  padding-left: 5px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

Через свойство background

Элемент списка 1
Элемент списка 2
Элемент списка 3

HTML

<ul class="custom-list-bg">
	<li>Элемент списка 1</li>
	<li>Элемент списка 2</li>
	<li>Элемент списка 3</li>
</ul>

CSS

.custom-list-bg li {
  display: block;
  margin: 7px 0;
  background: url('https://kak-eto-verstat.ru/images/round.svg') 0 4px no-repeat;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

Как сделать кастомные списки (ul) в HTML и CSS

Готовые сниппеты кода для кастомных списков на чистом HTML и CSS. Адаптивные и легко встраиваемые решения для веб-разработчиков и верстальщиков. Подходят для оформления FAQ, чек-листов, карточек с преимуществами, а также любых контентных блоков.

Особенности:

Маркеры: SVG/PNG, ::before, list-style-image
Аккуратные отступы и выравнивание текста в нескольких строках
Адаптация под разную ширину экранов
Возможность задать размер, цвет и позицию маркера
Простой, читаемый и легковесный код
Код подходит для доработки под ваши задачи
Совместим со всеми современными браузерами