Przeglądając jakiś czas temu, znalazłem tę stronę, próbowałeś tej alternatywy?

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

Brzmi ciężko, ale możesz zrobić własny obraz/Wzór png Proszę., następnie skopiuj / wklej kod i dostosuj swoje kule =) stills elegant?

EDIT:

Idąc za ideą @ lea-verou na drugą odpowiedź i stosując tę filozofię zewnętrznych źródeł doszedłem do tego innego rozwiązania:

1. umieść w swojej głowie arkusz stylów Webfonta Biblioteka ikon, w tym przypadku Font Awesome:

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

1. weź kod z FontAwesome cheatsheet (lub innych ikon webfonta).

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

I użyj ostatniej części f... po której następuje taka liczba, z font-family również:

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

I to wszystko! teraz masz też niestandardowe końcówki kul=)

Fiddle

Obecna Specyfikacja CSS 3 List Moduł określa ::marker pseudo-element który zrobiłby dokładnie to, co chcesz; FF został przetestowany aby nie obsługiwać ::marker i wątpię, czy ma to Safari czy Opera. IE, oczywiście, nie obsługuje go.

Więc teraz, jedynym sposobem, aby to zrobić, jest użycie obrazu z list-style-image.

Myślę, że można zawinąć zawartość li span i wtedy można ustawić kolor każdego z nich, ale to wydaje się trochę hakerskie dla mnie.

Po prostu rozwiązuję ten problem w ten sposób, który powinien działać we wszystkich przeglądarkach:

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;
}

Jednym ze sposobów jest użycie li:before z content: "" i stylizowanie go jako inline-block element.

Oto działający fragment kodu:

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

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

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>

Jednak innym rozwiązaniem jest użycie :before pseudo elementu z border-radius: 50%. Będzie to działać we wszystkich przeglądarkach, w tym IE 8 i nowszych.

Użycie jednostki em umożliwia reagowanie na zmiany rozmiaru czcionki. Możesz to przetestować, zmieniając rozmiar okna 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

Możesz nawet bawić się box-shadow, aby stworzyć ładne cienie, coś, co nie będzie wyglądać ładnie z rozwiązaniem content: "• ".

Używam do tego jQuery:

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

& z jakimś CSS:

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

Może przesada, ale przydatne, jeśli kodujesz dla CMS i nie chcesz prosić redaktorów o dodanie dodatkowego zakresu w każdej liście-pozycji.

Próbowałem tego i zrobiło się dziwnie. (css przestał działać po :after {content: "";} części tego samouczka. Znalazłem, że możesz pokolorować kule używając {[2] } na samym elemencie li.

Oto przykład.

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

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

Polecam dać LI A background-image i padding-left. Atrybut list-style-image jest flakey w środowiskach między przeglądarkami, a dodanie dodatkowego elementu, takiego jak span, jest unneccessary. Więc Twój kod będzie wyglądał mniej więcej tak:

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

Najprostszą rzeczą, jaką możesz zrobić, to zawinąć zawartość <li> w <span> lub równoważny, a następnie możesz ustawić kolor niezależnie.

Alternatywnie można utworzyć obraz o pożądanym kolorze punktora i ustawić go za pomocą właściwości list-style-image.

Odmiana Lea Verou rozwiązanie z doskonałym wcięciem w wpisach wielowierszowych może wyglądać mniej więcej tak:

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

li{
    padding-left: 1.5em; 
}

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

Dodaję moje rozwiązanie tego problemu.

Nie chcę używać image i validator ukarze cię za używanie ujemnych wartości w CSS, więc idę w ten sposób:

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

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

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

Wiem, że to trochę spóźniona odpowiedź na ten post, ale w celach informacyjnych...

CSS

ul {
    color: red;
}

li {
    color: black;
}

Kolor pocisku jest zdefiniowany na znaczniku ul, a następnie zmieniamy kolor li z powrotem.

Lea Verous rozwiązanie jest dobre, ale chciałem mieć większą kontrolę nad położeniem kul, więc takie jest moje podejście:

.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;
}

Biorąc pod uwagę demo Lei, oto inny sposób tworzenia niestandardowych list, z obramowaniami: 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;
}

To wystarczy..

li{
  color: #fff;
}