Cómo establecer los colores Bullet en listas UL / LI html mediante CSS sin usar imágenes o tags de span

Imagine una lista simple sin ordenar con algunos

  • artículos. Ahora, he definido las viñetas para que tengan forma cuadrada a través de list-style:square; Sin embargo, si configuro el color de los
  • elementos con color: #F00; ¡entonces todo se vuelve rojo!

    Mientras que solo quiero establecer el color de las viñetas cuadradas. ¿Hay una forma elegante de definir el color de las viñetas en CSS …

    … sin usar imágenes de sprites ni tags de división

    HTML

     
    • Item 1
    • Item 2
    • Item 3

    CSS

     li{ list-style:square; } 

    La forma más común de hacer esto es algo así:

     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.
  • Al navegar hace un tiempo, encontraste este sitio, ¿has probado esta alternativa?

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

    Suena difícil, pero puede hacer su propia imagen / patrón png aquí , luego copiar / pegar su código y personalizar sus viñetas =) ¿Todavía es elegante?

    EDITAR:

    siguiendo la idea de @ lea-verou en la otra respuesta y aplicando esta filosofía de mejora de fonts externas, he llegado a esta otra solución:

    1. incruste en su cabeza la hoja de estilo de la Biblioteca de icons de Webfont, en este caso Font Awesome:

    1. tomar un código de FontAwesome cheatsheet (o cualquier otro ícono de webfont).
     ie: fa-angle-right [] 

    y use la última parte de f … seguido de un número como este, con la font-family también:

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

    ¡y eso es! ahora también tienes sugerencias de viñetas personalizadas =)

    violín

    La especificación actual del módulo de listas de CSS 3 especifica el pseudo-elemento ::marker que haría exactamente lo que usted desea; FF ha sido probado para no admitir ::marker y dudo que Safari u Opera lo tengan. IE, por supuesto, no lo admite.

    Entonces, en este momento, la única forma de hacerlo es usar una imagen con list-style-image .

    Supongo que podrías envolver el contenido de un li con un span y luego podrías establecer el color de cada uno, pero eso me parece un poco hackish.

    Simplemente resuelvo este problema de esta manera, que debería funcionar en todos los navegadores:

    HTML:

     
    • Foo
    • Bar
    • Bat

    CSS:

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

    Una forma de hacerlo es usar li:before con content: "" y diseñarlo como elemento de inline-block .

    Aquí hay un fragmento de código que funciona:

     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

    Sin embargo, otra solución es usar a :before pseudo element con un border-radius: 50% . Esto funcionará en todos los navegadores, incluido IE 8 y posteriores.

    El uso de la unidad em permite una respuesta a los cambios de tamaño de fuente. Puede probar esto, cambiando el tamaño de su ventana 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

    Incluso puede jugar con la box-shadow para crear sombras agradables, algo que no se verá bien con el content: "• " solución content: "• " .

    Yo uso jQuery para esto:

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

    y con algunos CSS:

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

    tal vez exagerado, pero útil si está codificando un CMS y no quiere pedirle a sus editores que agreguen un lapso adicional en cada elemento de la lista.

    Intenté esto y las cosas se pusieron raras para mí. (css dejó de funcionar después de :after {content: "";} parte de este tutorial. Descubrí que puede colorear las viñetas con solo usar color:#ddd; en el elemento li mismo.

    Aquí hay un ejemplo .

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

    Recomendaría darle al LI una background-image y padding-left . El atributo list-style-image es escaso en entornos de navegador cruzado, y no es necesario agregar un elemento adicional, como un intervalo. Entonces su código terminaría luciendo algo como esto:

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

    Lo más fácil que puede hacer es ajustar el contenido del

  • en un o equivalente, luego puede establecer el color de forma independiente.

    Alternativamente, podría hacer una imagen con el color de viñeta que desee y establecerla con la propiedad de list-style-image .

    Una variación de la solución Lea Verou con sangría perfecta en las entradas de varias líneas podría ser algo como esto:

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

    Estoy agregando mi solución a este problema.

    No quiero usar imágenes y el validador lo castigará por usar valores negativos en CSS, así que voy de esta manera:

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

    Sé que es una respuesta tardía para esta publicación, pero como referencia …

    CSS

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

    El color de la viñeta se define en la etiqueta ul y luego cambiamos el color li nuevamente.

    La solución Lea Verous es buena, pero quería más control sobre la posición de las balas, así que este es mi enfoque:

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

    Tomando la demostración de Lea, aquí hay una forma diferente de hacer listas desordenadas, con fronteras: 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; } 

    Esto lo hará …

     li{ color: #fff; }