Как задать цвет маркеров в HTML-списках UL/LI с помощью CSS без использования изображений и тегов span

Самый распространенный способ сделать это выглядит примерно так:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* или любой другой цвет, который вам нравится */
}

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

Вы можете увидеть пример на JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

Это решение будет работать во всех браузерах, включая IE начиная с версии 8.

Я просто решаю эту проблему вот так, что должно работать во всех браузерах:

ul li {
  color: red;
}

ul li span {
  color: blue;
}

<ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Bat</span></li>
</ul>

В этом примере элементы списка <li> будут красными, а текст внутри <span> будет синим. Таким образом, вы получите нужный вам визуальный эффект для списка.

Одним из способов решения вашей задачи является использование псевдоэлемента li:before с content: "" и стилизацией его как элемент inline-block.

Вот рабочий фрагмент кода:

ul {
  list-style-type: none; /* убираем стандартные маркеры */
}

ul li { 
  font-family: Arial;
  font-size: 18px;
}

ul li:before { /* настраиваем пользовательские маркеры */
  background-color: #14CCBB;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 2px;
  height: 10px;
  width: 10px;
}

<ul>
  <li>Отечность суставов</li>
  <li>Боль в руках и коленях</li>
  <li>Покраснение вокруг суставов</li>
  <li>Постоянная усталость</li>
  <li>Утренние скованности в суставах</li>
  <li>Высокая температура</li>
  <li>Ревматоидные узелки, которые развиваются вокруг суставов</li>
</ul>

Этот подход дает вам возможность создать индивидуальные маркеры для пунктов списка, что улучшает визуальную представимость. Настройте цвета и размеры по вашему усмотрению!

Вы можете использовать jQuery для обертывания содержимого элемента <li> в тег <span>, как показано в вашем примере:

jQuery('li').wrapInner('<span class="li_content" />');

С помощью следующего CSS вы сможете настроить стили для ваших элементов:

li { color: red; }
li span.li_content { color: black; }

Это может показаться избыточным, однако это очень удобно, если вы работаете с CMS и хотите избавить редакторов от необходимости вручную добавлять дополнительные теги <span> в каждый элемент списка. Такой подход упрощает процесс редактирования и поддержания кода, особенно если редакторы не имеют соответствующего опыта работы с HTML.

Я бы порекомендовал задать элементу LI свойство background-image и добавить отступ слева с помощью padding-left. Свойство list-style-image может работать нестабильно в различных браузерах, а добавление дополнительного элемента, например, span, является излишним. В результате ваш код будет выглядеть примерно так:

li {
  background: url(../images/bullet.png) 0 0 no-repeat;
  list-style: none;
  padding-left: 10px;
}