Как изменить цвет Ul; LI (точки)

Question

Я использовал для своего кода в начале такую команду

ul ::marker {
    font-size: 10px;
    color: #FB6D3A;
}

Но столкнулся с проблемой что теперь оно для всего приняло такой цвет а нужно поменять цвет в одном разделе на другой но при этом оставив этот же самый цвет. Что с этим можно сделать?

Answer 1

Можно, но для этого придётся использовать свой "маркер":

ul {
  list-style: none; /* Удалить маркеры по умолчанию */
}

ul li::before {
  content: "\2022"; /* Добавляем content: \2022, он же символ точки (маркера) */
  display: inline-block;
  width: 1em;
  color: red; /* меняем цвет */
  font-weight: bold;
  margin-left: -1em;
}

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
</ul>

Источник

Вариант с псевдоэлементом ::marker

ul li::marker {
  color: red;
}

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
</ul>

Документация

P.s. ЯблокоФоны вам этого не простят.

БЛОГ НА HUSL

Как изменить цвет Ul; LI (точки)

Ответы (1 шт):