Necesito usar, por ejemplo, el símbolo de estrella (★) como viñeta para un elemento de lista.
He leído el módulo CSS3: Listas , que describe cómo usar texto personalizado como viñetas, pero no me funciona. Creo que los navegadores simplemente no admiten el ::marker
pseudo elemento.
¿Cómo puedo hacerlo sin usar imágenes?
html
css
html-lists
AntonAL
fuente
fuente
Respuestas:
EDITAR
Probablemente ya no recomendaría usar imágenes. Me quedaría con el enfoque de usar un carácter Unicode, como este:
ANTIGUA RESPUESTA
Probablemente optaría por un fondo de imagen, son mucho más
eficientes,versátiles y compatibles con todos los navegadores.He aquí un ejemplo:
fuente
<li>
texto se ajusta: la viñeta no permanece sin sangrar y termina pareciendo el comienzo de un párrafo de texto. Esta respuesta soluciona este problema: stackoverflow.com/a/14301918/1450294Usar texto como viñetas
Utilice
li:before
con una entidad HTML hexadecimal escapada (o cualquier texto sin formato).Ejemplo
Mi ejemplo producirá listas con marcas de verificación como viñetas.
CSS :
Compatibilidad del navegador
No me he probado, pero debería ser compatible a partir de IE8. Al menos eso es lo que dicen quirksmode y css-tricks .
Puede utilizar comentarios condicionales para aplicar soluciones más antiguas o más lentas, como imágenes o scripts. Mejor aún, use ambos con
<noscript>
para las imágenes.HTML :
Acerca de las imágenes de fondo
Las imágenes de fondo son realmente fáciles de manejar, pero ...
background-size
es en realidad solo a partir de IE9.list-style
(la opción más lógica).Disfrutar.
fuente
li
elemento se ajusta a varias líneas; esas líneas envueltas no se sangrarán correctamente.float: left; margin-left: -12px;
en el: antes de encargarme de eso, @RichardEverettPuedes construirlo:
fuente
'\21B3'
! ¡Gracias! Funcionó mejor que las otras respuestas aquí. También cambiépadding-left
en mi diseño a1em
, que se adapta bien cuando los niveles de los árboles cambian de tamaño.Esta es la solución del W3C. ¡Puedes usarlo en 3012!
https://drafts.csswg.org/css-lists/#text-markers
fuente
li:before
solución.No se recomiendan las imágenes, ya que pueden aparecer pixeladas en algunos dispositivos (dispositivos Apple con pantalla Retina) o cuando se amplían. Con un personaje, su lista siempre se ve increíble.
Aquí está la mejor solución que he encontrado hasta ahora. Funciona muy bien y es para varios navegadores (IE 8+).
Lo importante es tener el carácter en un bloque flotante con un ancho fijo para que el texto permanezca alineado si es demasiado largo para caber en una sola línea. 1.2em es el ancho que desea para su personaje, cámbielo según sus necesidades. No olvide restablecer el relleno y el margen para los elementos ul y li.
EDITAR: Tenga en cuenta que el tamaño "1.2em" puede variar si usa una fuente diferente en ul y li: antes. Es más seguro usar píxeles.
fuente
Para agregar una estrella, use el carácter Unicode
22C6
.Agregué un espacio para hacer un pequeño espacio entre el
li
y la estrella. El código del espacio esA0
.fuente
Un ejemplo más completo de la respuesta de 222 :
He incluido propiedades de star-hack para restaurar los estilos de lista predeterminados en versiones anteriores de IE. Puede extraerlos e incluirlos en una inclusión condicional si lo desea, o reemplazarlos con una solución basada en imágenes de fondo. Mi humilde opinión es que los estilos especiales de viñetas implementados de esta manera deberían degradarse con gracia en los pocos navegadores que no admiten pseudoelectores.
Probado en Firefox, Chrome, Safari e IE8-10 y se procesa correctamente en todos.
fuente
text-indent: -1em;
es una propiedad importante si tiene elementos de lista de varias líneas. Sin él, la segunda línea y las siguientes se alinean con la viñeta en lugar de la línea anterior.fuente
He revisado toda esta lista y, a partir de 2020, hay elementos parcialmente correctos y parcialmente incorrectos.
Descubrí que la sangría y el desplazamiento eran el mayor problema al usar UTF-8, por lo que estoy publicando esto como una solución CSS compatible con 2020 usando la viñeta del "triángulo vertical" como mi ejemplo.
utilizar
em
como unidad para evitar conflictos con el tamaño de la fuentefuente
Prueba este código ...
fuente
Este tema puede ser antiguo, pero aquí hay una solución rápida
ul {list-style:outside none square;}
oul {list-style:outside none disc;}
, etc.luego agregue relleno izquierdo al elemento de la lista
fuente