Изменение маркеров списка на CSS (псевдокласс before)

Использование списков в статье положительно сказывается как на SEO, так и на восприятии пользователем информации. Существует множество способов красиво отобразить маркеры (картинкой или с помощью CSS). Мы же рассмотрим достаточно простой, но стильный метод, как изменить маркеры списка на CSS.

Как это выглядит?

В этом случае нам не обойтись без новых технологий, а именно – CSS3 с поддержкой псевдокласса before. С помощью одних лишь только стилей и базовой верстки HTML мы преобразим наскучившие стандартные маркеры, не отвечающие современным стандартам.

В первом случае будем использовать маркированный список, который нам предлагает тег <ul>:

• Что у нас получилось.
• Неплохо, правда?

Соответственно, во втором случае нумерованный список от тега <ol>:

1. Слева от текста число.
2. Продолжение списка на необходимое нам количество полей.

Элементы находятся на одном расстоянии от начала текстового блока, что придает им дополнительный шарм.

Красивый маркированный список <ul>

В качестве символов можно использовать различные значения. Достаточно вписать новый код в свойство content.

HTML

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
</ul>

CSS

ul {
  list-style-type: none;
}
ul li:before {
  content: "\203A ";
  padding-right: 6px;
  font-size: 16px;
  color: #00bf80;
  font-weight: bold;
}

Красивый нумерованный список <ol>

С помощью нумерованного списка можно как симпатично оформить блок текста на странице, так и создать удобное и понятное содержание статьи, как в начале этого материала.

HTML

<ol>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
</ol>

CSS

ol {
  margin-left: 63px;
  list-style-type: none;
  counter-reset: li;
}
ol li:before {
  content: counter(li);
  counter-increment: li 1;
  padding: 0px 6px;
  margin-left: -28px;
  font-size: 12px;
  text-align: center;
  color: white;
  position: absolute;
  background: #00bf80;
}

Оформляйте свои статьи правильно, чтобы пользователь не повысил процент отказов.

 3,928 total views,  2 views today