Como definir colors Bullet nas listas de HTML do UL / LI via CSS sem usar nenhuma imagem ou tag span

Imagine uma simples lista não classificada com alguns itens

  • . Agora, defini as marcas para serem quadradas list-style:square; No entanto, se eu definir a cor dos itens
  • com color: #F00; então tudo fica vermelho!

    Enquanto eu só quero definir a cor das balas quadradas. Existe uma maneira elegante de definir a cor dos marcadores em CSS …

    … sem usar imagens de sprites nem tags de span!

    HTML

     
    • Item 1
    • Item 2
    • Item 3

    CSS

     li{ list-style:square; } 

    A maneira mais comum de fazer isso é algo ao longo destas linhas:

     ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: "• "; color: red; /* or whatever color you prefer */ } 
     
    • Foo
    • Bar
    • 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.
  • navegando há algum tempo atrás, encontrei este site, você já tentou esta alternativa?

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

    soa duro, mas você pode fazer sua própria imagem / padrão png aqui , então copiar / colar seu código e personalizar suas balas =) fotos elegantes?

    EDITAR:

    seguindo a idéia de @ lea-verou sobre a outra resposta e aplicando essa filosofia de aprimoramento de fonts externas, cheguei a essa outra solução:

    1. incorpore em sua cabeça a folha de estilo da biblioteca de icons do Webfont, neste caso Font Awesome:

    1. pegue um código da cheatheet FontAwesome (ou qualquer outro ícone webfont).
     ie: fa-angle-right [] 

    e use a última parte de f … seguida por um número como este, com a font-family da font-family também:

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

    e é isso! agora você tem dicas de bala personalizadas também =)

    violino

    A especificação atual do módulo CSS 3 Lists especifica o pseudo-elemento ::marker que faria exatamente o que você quer; FF foi testado para não suportar ::marker e duvido que o Safari ou o Opera o possuam. IE, é claro, não suporta isso.

    Então, agora, a única maneira de fazer isso é usar uma imagem com a list-style-image .

    Eu acho que você poderia embrulhar o conteúdo de um li com uma span e então você poderia definir a cor de cada um, mas isso parece um pouco hackish para mim.

    Eu simplesmente resolvo este problema como este, que deve funcionar em todos os navegadores:

    HTML:

     
    • Foo
    • Bar
    • Bat

    CSS:

     ul li{ color: red } ul li span{ color: blue; } 

    Uma maneira de fazer isso é usando o li:before com o content: "" e estilizando-o como elemento inline-block .

    Aqui está um trecho de código em funcionamento:

     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; } 
     
    • Swollen joints
    • Pain in hands and knees
    • Redness around joints
    • Constant fatigue
    • Morning stiffness in joints
    • High fevers
    • Rheumatoid nodules, which develop around joints

    No entanto, outra solução é usar um pseudo elemento :before com um border-radius: 50% . Isso funcionará em todos os navegadores, incluindo o IE 8 e superior.

    O uso da unidade em permite a capacidade de resposta às alterações no tamanho da fonte. Você pode testar isso redimensionando a janela do 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

    Você pode até jogar com a box-shadow da box-shadow para criar algumas sombras agradáveis, algo que não ficará bem com a solução de content: "• " .

    Eu uso o jQuery para isso:

     jQuery('li').wrapInner(''); 

    & com algum CSS:

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

    talvez um exagero, mas útil se você estiver codificando para um CMS e não quiser pedir aos seus editores para colocar uma extensão extra em todos os itens da lista.

    Eu tentei isso e as coisas ficaram estranhas para mim. (O css parou de funcionar após o :after {content: "";} parte deste tutorial. Descobri que você pode colorir os marcadores usando apenas color:#ddd; no próprio item li .

    Aqui está um exemplo .

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

    Eu recomendaria dar ao LI uma background-image e padding-left . O atributo list-style-image é flakey em ambientes de vários navegadores e a inclusão de um elemento extra, como span, não é necessária. Então seu código acabaria parecendo com isso:

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

    A coisa mais fácil que você pode fazer é envolver o conteúdo do

  • em um ou equivalente, então você pode definir a cor de forma independente.

    Como alternativa, você pode criar uma imagem com a cor do marcador desejada e configurá-la com a propriedade list-style-image .

    Uma variação da solução de Lea Verou com recuo perfeito em inputs de várias linhas poderia ser algo assim:

     ul{ list-style: none; position: relative; padding: 0; margin: 0; } li{ padding-left: 1.5em; } li:before { position: absolute; content: "•"; color: red; left: 0; } 

    Eu estou adicionando minha solução para este problema.

    Eu não quero usar a imagem e validador irá puni-lo por usar valores negativos em CSS, então eu vou por aqui:

     ul { list-style:none; padding:0; margin:0; } li { padding-left:0.75em; position:relative; } li:before { content:"•"; color:#e60000; position:absolute; left:0em; } 

    Eu sei que é uma resposta tardia para este post, mas para referência …

    CSS

     ul { color: red; } li { color: black; } 

    A cor do marcador é definida na tag ul e, em seguida, trocamos a cor li de volta.

    Tomando a demonstração de Lea, aqui está uma maneira diferente de criar listas desordenadas, com bordas: http://jsfiddle.net/vX4K8/7/

    HTML

     
    • Foo
    • Bar
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Son
    • Of
    • Foo
    • Bar
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    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 Verous solução é boa, mas eu queria mais controle sobre a posição das balas, então esta é a minha abordagem:

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

    Isso vai fazer isso ..

     li{ color: #fff; }