viñeta - lista numerada html
Cambiar el color de las viñetas de una lista HTML sin utilizar span (9)
Basándose en la respuesta de @ddilsaver. Quería poder usar un sprite para la bala. Esto parece funcionar:
li {
list-style: none;
position: relative;
}
li:before {
content:'''';
display: block;
position: absolute;
width: 20px;
height: 20px;
left: -30px;
top: 5px;
background-image: url(i20.png);
background-position: 0px -40px; /* or whatever offset you want */
}
Me preguntaba si hay una forma de cambiar el color de las viñetas en una lista.
Tengo una lista como esta:
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
No me es posible insertar nada en el li, como ''span'' og a ''p''. Entonces, ¿puedo cambiar el color de las viñetas pero no el texto de alguna manera inteligente?
Basándose en la solución de @ Marc: dado que el carácter de viñeta se representa de forma diferente con diferentes fuentes y navegadores, usé la siguiente técnica css3 con radio de borde para crear una viñeta sobre la que tengo más control:
li:before {
content: '''';
background-color: #898989;
display: inline-block;
position: relative;
height: 12px;
width: 12px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin-right: 4px;
top: 2px;
}
Construyendo soluciones @Marc y @jessica - Esta es la solución que uso:
li {
position:relative;
}
li:before {
content:'''';
display: block;
position: absolute;
width: 6px;
height:6px;
border-radius:6px;
left: -20px;
top: .5em;
background-color: #000;
}
Utilizo em para tamaños de fuente, por lo que si configuras tu valor top en .5em , siempre se colocará en el punto medio de la primera línea de texto. Utilicé a la left:-20px porque esa es la posición predeterminada de las viñetas en los navegadores: left:-20px padres padding/2
Logré esto sin agregar marcado, sino que usé li:before . Obviamente, esto tiene todas las limitaciones de :before (sin soporte de IE anterior), pero parece funcionar con IE8, Firefox y Chrome después de algunas pruebas muy limitadas. El estilo de viñeta también está limitado por lo que hay en Unicode.
li {
list-style: none;
}
li:before {
/* For a round bullet */
content: ''/2022'';
/* For a square bullet */
/*content:''/25A0'';*/
display: block;
position: relative;
max-width: 0;
max-height: 0;
left: -10px;
top: 0;
color: green;
font-size: 20px;
}
<ul>
<li>foo</li>
<li>bar</li>
</ul>
Para mí, la mejor opción es usar pseudo elementos de CSS, por lo que para el estilo de viñeta de disc se vería así:
ul {
list-style-type: none;
}
li {
position: relative;
}
li:before {
content: '''';
display: block;
position: absolute;
width: 5px; /* adjust to suit your needs */
height: 5px; /* adjust to suit your needs */
border-radius: 50%;
left: -15px; /* adjust to suit your needs */
top: 0.5em;
background: #f00; /* adjust to suit your needs */
}
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
Notas:
-
widthy laheightdeben tener los mismos valores para mantener los indicadores redondeados - puede establecer
border-radiusen cero si desea tener viñetas de la listasquare
Para obtener más estilos de viñetas, puede usar otras formas CSS https://css-tricks.com/examples/ShapesOfCSS/ (seleccione esto que no requiere pseudo elementos para trabajar, por ejemplo, triángulos)
Podemos combinar list-style-image con svg s, ¡que podemos incluir en css ! Este método ofrece un control increíble sobre las "balas", que pueden convertirse en cualquier cosa.
Para obtener un círculo rojo, simplemente use el siguiente css:
ul {
list-style-image: url(''data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>'');
}
Pero esto es solo el principio. Esto nos permite hacer cualquier cosa loca que queramos con esas balas. círculos o rectángulos son fáciles, pero cualquier cosa que puedas dibujar con svg ¡puedes quedarte ahí! Mira el siguiente ejemplo de diana:
ul {
list-style-image: url(''data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>'');
}
ul ul {
list-style-image: url(''data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>'');
}
ul ul ul {
list-style-image: url(''data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>'');
}
ul ul ul ul {
list-style-image: url(''data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>'');
}
ul.bulls-eye {
list-style-image: url(''data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>'');
}
ul.multi-color {
list-style-image: url(''data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>'');
}
<ul>
<li>
Big circles!
<ul>
<li>Big rectangles!</li>
<li>b
<ul>
<li>Small circles!</li>
<li>c
<ul>
<li>Small rectangles!</li>
<li>b</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>b</li>
</ul>
<ul class="bulls-eye">
<li>Bulls</li>
<li>eyes.</li>
</ul>
<ul class="multi-color">
<li>Multi</li>
<li>color</li>
</ul>
Atributos de ancho / altura
Algunos navegadores requieren atributos de width y height para ser configurados en el <svg> , o no muestran nada. Al momento de escribir, las versiones recientes de Firefox presentan este problema. Establecí ambos atributos en los ejemplos.
Codificaciones
Un comentario reciente me recordó las codificaciones del data-uri. Este fue un punto de dolor para mí recientemente, y puedo compartir un poco de información que he investigado.
La especificación de datos-uri , que hace referencia a la especificación URI , dice que la svg debe codificarse de acuerdo con la especificación URI . Eso significa que todo tipo de caracteres debe codificarse, por ejemplo < convierte en %3C .
Algunas fuentes sugieren la codificación de base64, que debería corregir los problemas de codificación, sin embargo, aumentará innecesariamente el tamaño de SVG, mientras que la codificación de URI no lo hará. Recomiendo la codificación URI.
Más información:
Sé que esta es una pregunta muy, muy, muy vieja, pero estaba jugando con esto y se me ocurrió una forma que no había visto publicada. Dale un color a la lista y luego sobrescribe el color del texto usando el selector ::first-line . No soy un experto así que tal vez haya algo de malo en este enfoque que me falta, pero parece funcionar.
li {
color: blue;
}
li::first-line {
color: black;
}
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
Si puede usar una imagen, puede hacerlo. Y sin una imagen, no podrá cambiar el color de las viñetas solamente y no el texto.
Usando una imagen
li { list-style-image: url(images/yourimage.jpg); }
Ver
Sin usar una imagen
Luego debe editar el marcado HTML e incluir un lapso dentro de la lista y colorear el li y el lapso con diferentes colores.
También me gustó mucho la respuesta de Marc: necesitaba un juego de UL de diferentes colores y obviamente sería más fácil usar una clase. Esto es lo que usé para naranja, por ejemplo:
ul.orange {
list-style: none;
padding: 0px;
}
ul.orange > li:before {
content: ''/25CF '';
font-size: 15px;
color: #F00;
margin-right: 10px;
padding: 0px;
line-height: 15px;
}
Además, descubrí que el código hexadecimal que utilicé para "contenido:" era diferente al de Marc (ese círculo hexagonal parecía estar demasiado alto). El que usé parece estar perfectamente en el medio. También encontré varias otras formas (cuadrados, triángulos, círculos, etc.) aquí