Как сделать, чтобы цвет маркеров в списке отличался от цвета текста? Без спана. Без картинок.

[provoloka]

Знаю, что знатоки любят головоломки по верстке, поэтому предлагаю вот такую задачку, которую сегодня пришлось решать. И, что порадовало и удивило, успешно)

Чтобы все было по честному, результат будет сделан картинкой (чтобы не повадно было посмотреть css), html-код я прикладываю.

Итак, есть такая статья «Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?», там предложен способ с тэгом span. А можно ли добиться того же эффекта без спана? И, естественно, без картинок, чистым css?

Что скажете? В общем, предлагаю подумать над css. Уверен, что решение будет в ближайшие пару часов. Если нет, тогда поделюсь своим, которое, имхо, вполне удачное. Просто очень интересно, в правильном и изящном ли направлении я думал при решении.

Код:

<ul class="vers">
	<li>Обычный маркер</li>
	<li class="act">Зеленый маркер</li>
	<li>И никакого спана!
		<ul class="vers">
			<li class="act">Во внутреннем списке зеленый маркер тоже гууд.</li>
			<li>И никаких картинок.</li>
		</ul>
	</li>
</ul>

Результат:

Edited August 26, 2012 by provoloka

[Svatov]

А вы полностью читали ту статью, на которую ссылались?

Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content. Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае LI. Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2. Здесь в качестве маркеров используется символ параграфа ¶.

Вот вам и способ без span.

[sigma77]

http://jsfiddle.net/w9MNH/

Или для кроссбраузерности (ИЕ7 и ниже использовать бекграунд).

[provoloka]

А вы полностью читали ту статью, на которую ссылались?

Оххо, круто, пару часов назад все выглядело по другому и было именно (и только) со спаном.

http://jsfiddle.net/w9MNH/

Или для кроссбраузерности (ИЕ7 и ниже использовать бекграунд).

Да!

Edited August 26, 2012 by provoloka

[Svatov]

Оххо, круто, пару часов назад все выглядело по другому и было именно (и только) со спаном.

На самом деле статье больше полугода так точно) Так, что надо пенять только на себя самого)

[provoloka]

Оххо, круто, пару часов назад все выглядело по другому и было именно (и только) со спаном.

На самом деле статье больше полугода так точно) Так, что надо пенять только на себя самого)

Вспомнил, точно, была эта статья. И вспомнил, почему меня не устроил 2-й вариант. Там не указаны абсолют и рилэйтив, и в результате выходит что-то типа такого

http://jsfiddle.net/kfp42/

Edited August 26, 2012 by provoloka