... без использования спрайтов и тегов span!

Текущая спецификация модуля CSS 3 Lists определяет ::marker псевдоэлемент, который будет делать именно то, что вы хотите; FF был протестирован, чтобы не поддерживать, ::markerи я сомневаюсь, что у Safari или Opera есть. IE, конечно, его не поддерживает.

Так что сейчас единственный способ сделать это - использовать изображение с list-style-image.

Я думаю, вы могли бы обернуть содержимое a liс помощью a, spanа затем вы можете установить цвет каждого из них, но это кажется мне немного хакерским.

Самое простое, что вы можете сделать - это обернуть содержимое <li>в <span>или в эквивалент, тогда вы можете установить цвет независимо.

В качестве альтернативы, вы можете сделать изображение с нужным цветом маркера и установить его с помощью list-style-imageсвойства.

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

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

Я использую jQuery для этого:

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

и с некоторыми CSS:

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

может быть излишним, но это удобно, если вы пишете код для CMS и не хотите, чтобы ваши редакторы добавляли дополнительный интервал в каждый элемент списка.

просматривая некоторое время назад, нашел этот сайт, вы пробовали эту альтернативу?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

Звучит сложно, но вы можете сделать свой собственный PNG изображение / рисунок здесь , а затем скопировать / вставить код и настроить ваши пули =) кадры из фильма элегантных?

РЕДАКТИРОВАТЬ:

Следуя идее @ lea-verou для другого ответа и применяя эту философию улучшения внешних источников, я пришел к этому другому решению:

1. вставьте в свою голову таблицу стилей библиотеки значков Webfont, в данном случае Font Awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2. взять код из FontAwesome Cheatsheet (или любые другие значки WebFont).

i.e.:
fa-angle-right []

и используйте последнюю часть f ..., за которой следует число вроде этого, а font-familyтакже:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

вот и все! теперь у вас есть собственные подсказки пули тоже =)

играть на скрипке

Я попробовал это, и все стало странно для меня. (CSS перестал работать после :after {content: "";}части этого урока. Я обнаружил, что вы можете раскрасить пули, просто используя color:#ddd;сам liэлемент.

Вот пример .

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}

Я знаю, что это немного поздний ответ на этот пост, но для справки ...

CSS

ul {
    color: red;
}

li {
    color: black;
}

Цвет маркера определяется тегом ul, а затем мы переключаем цвет li обратно.

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

HTML:

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

CSS:

ul li{
    color: red
}

ul li span{
    color: blue;
}

Взяв демонстрацию Леа, мы предлагаем другой способ создания неупорядоченных списков с границами: http://jsfiddle.net/vX4K8/7/

HTML

<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.</li>
        <ul>
        <li>Son</li>
        <li>Of</li>
            <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.</li>
            </ul>
        </ul>
</ul>

CSS

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

ul:first-child {
   padding: 0;
}

li {
    line-height: 180%;
    border-bottom: 1px dashed #CCC;
    margin-left: 14px;
    text-indent: -14px;
}

li:last-child {
    border: none;
}

li:before {
    content: "";
    border-left: 4px solid #CCC;
    padding-left: 10px;
}

Вариант решения Lea Verou с идеальным отступом в многострочных записях может выглядеть примерно так:

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

li{
    padding-left: 1.5em; 
}

li:before {
    position: absolute;
    content: "•";
    color: red;
    left: 0;
}

Еще одно решение - использовать :beforeпсевдоэлемент с border-radius: 50%. Это будет работать во всех браузерах, включая IE 8 и выше.

Использование emустройства позволяет реагировать на изменения размера шрифта. Вы можете проверить это, изменив размер окна jsFiddle.

ul {
    list-style: none;
    line-height: 1em;
    font-size: 3vw;
}

ul li:before {
    content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: red;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}

jsFiddle

Вы даже можете поиграть с ним, box-shadowчтобы создать несколько хороших теней, которые не будут хорошо смотреться с content: "• "решением.

Я добавляю свое решение этой проблемы.

Я не хочу использовать изображение, и валидатор накажет вас за использование отрицательных значений в CSS, поэтому я иду по этому пути:

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

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }

Это сделает это ..

li{
  color: #fff;
}

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

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

ul {
  list-style-type: none; /* no default bullets */
}

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

ul li:before { /* the custom styled bullets */
  background-color: #14CCBB;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 2px;
  height: 10px;
  width: 10px;
}

<ul>
  <li>Swollen joints</li>
  <li>Pain in hands and knees</li>
  <li>Redness around joints</li>
  <li>Constant fatigue</li>
  <li>Morning stiffness in joints</li>
  <li>High fevers</li>
  <li>Rheumatoid nodules, which develop around joints</li>
</ul>

Решение Lea Verous хорошо, но я хотел больше контролировать положение пуль, так что это мой подход:

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* hide overflow in the case of floating elements around ... */
    overflow: hidden;
}
.entry li { 
    position: relative;
    padding-left: 24px;
}
.entry li:before {
    /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
    position: absolute;
    content: "• ";
    color: #E94E24;
    font-size: 30px;
    left: 0;
    /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ 
    font-family: Arial, sans-serif;
}