Carácter Unicode como viñeta para elemento de lista en CSS

114

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 ::markerpseudo elemento.

¿Cómo puedo hacerlo sin usar imágenes?

AntonAL
fuente
¿Puedes poner el código que estás usando? ¿Y en qué navegador estás probando esto?
Jonny Haynes
1
stackoverflow.com/questions/3068199/… tiene algunas viñetas Unicode. Ni el símbolo de estrella que tiene arriba, ni 26AB (círculo negro medio) se muestran en mi máquina con Windows, aunque están bien en Ubuntu.
Pete Kirkham
Esta respuesta (a una pregunta similar) me la resolvió: stackoverflow.com/a/12216973/907575
Piotr Migdal

Respuestas:

77

EDITAR

Probablemente ya no recomendaría usar imágenes. Me quedaría con el enfoque de usar un carácter Unicode, como este:

li:before {
  content: "\2605";
}

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:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>
agbb
fuente
47
¿Cómo es eso "mucho más eficiente"? Está enviando una solicitud HTTP adicional para obtener la imagen y el archivo total aumenta a medida que carga una imagen para algo que podría hacerse mediante el uso de un solo carácter Unicode.
Mathias Bynens
2
tienes razón, probablemente "eficiente" no es la palabra que debería haber usado si buscas rendimiento, pero usar un fondo de imagen es ciertamente mucho más versátil que usar texto.
agbb
3
No es muy bueno cambiar el tamaño de una imagen, pero un personaje es perfecto en todos los tamaños, por lo que diría que un personaje es más versátil: PI creo que es compatible con backword o con la más amplia gama de compatibilidad con el navegador
JustGoscha
Esto no funciona bien cuando el <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/1450294
Michael Scheper
105

Usar texto como viñetas

Utilice li:beforecon una entidad HTML hexadecimal escapada (o cualquier texto sin formato).


Ejemplo

Mi ejemplo producirá listas con marcas de verificación como viñetas.

CSS :

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

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

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 :

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

Acerca de las imágenes de fondo

Las imágenes de fondo son realmente fáciles de manejar, pero ...

  1. La compatibilidad con el navegador background-sizees en realidad solo a partir de IE9.
  2. Los colores de texto HTML y las fuentes especiales ( locas ) pueden hacer mucho, con menos solicitudes HTTP.
  3. Una solución de script puede simplemente inyectar la entidad HTML y dejar que el mismo CSS haga el trabajo.
  4. Un buen restablecimiento del código CSS podría facilitar list-style(la opción más lógica).

Disfrutar.

222
fuente
1
herramienta de conversión útil para escapar caracteres especiales rishida.net/tools/conversion~~V~~singular~~3rd
IIZ
23
Esto no funciona correctamente si el contenido del lielemento se ajusta a varias líneas; esas líneas envueltas no se sangrarán correctamente.
Richard Ev
5
float: left; margin-left: -12px;en el: antes de encargarme de eso, @RichardEverett
Dudo
1
Trabajo para una línea, pero no funciona si se envuelven varias líneas.
VDarricau
1
Funciona solo para elementos de lista de una sola línea. Las líneas múltiples caerán debajo de la viñeta en lugar de sangrar.
Clarus Dignus
35

Puedes construirlo:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}
defann
fuente
4
Esta es una gran técnica porque si no haces el posicionamiento absoluto del personaje, terminas con el "Bullet" alineado con el resto del elemento de la lista. Ese es un comportamiento muy poco parecido a una bala. Entonces, con esta solución, obtienes la "viñeta" a la izquierda del elemento de la lista como lo harías con una viñeta normal.
General Redneck
¡Gracias por esto! Exactamente lo que necesitaba para que mis balas se comportaran de nuevo.
tubaguy50035
1
¡Esto hace que el uso de un árbol de navegación sea maravilloso '\21B3'! ¡Gracias! Funcionó mejor que las otras respuestas aquí. También cambié padding-leften mi diseño a 1em, que se adapta bien cuando los niveles de los árboles cambian de tamaño.
ndm13
23

Esta es la solución del W3C. ¡Puedes usarlo en 3012!

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.csswg.org/css-lists/#text-markers

PHPst
fuente
12
Escuché que en 3012, Internet Explorer finalmente funciona.
Mark K Cowan
2
Esto funciona en Firefox 48, pero no en Chromium 51 ni en mi teléfono / tableta. On tendrá que usar la li:beforesolución.
CoderGuy123
1
Trabajos. Bienvenidos al futuro, señoras y señores.
Mikko Ohtamaa
12

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+).

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

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.

NicolasBernier
fuente
¿Quizás agregar "altura: 1px" o similar al li: antes? Eso asegura que el flotador no se extienda hasta el siguiente <li>, causando un anidamiento no deseado.
Alan De Smet
Por qué la pantalla: bloque; en li: antes? ¿Es porque por defecto está en línea y no puede especificar un ancho?
Alexander Solonik
6

Para agregar una estrella, use el carácter Unicode 22C6.

Agregué un espacio para hacer un pequeño espacio entre el liy la estrella. El código del espacio es A0.

li:before {
    content: '\22C6\A0';
}
Puñal
fuente
4

Un ejemplo más completo de la respuesta de 222 :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

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.

pospi
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.
Andris
3
ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}
Iacchus
fuente
1

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.

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

utilizar emcomo unidad para evitar conflictos con el tamaño de la fuente

Beerswiller
fuente
0

Prueba este código ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}
Charaf JRA
fuente
-1

Este tema puede ser antiguo, pero aquí hay una solución rápida ul {list-style:outside none square;}o ul {list-style:outside none disc;}, etc.

luego agregue relleno izquierdo al elemento de la lista

ul li{line-height: 1.4;padding-bottom: 6px;}
usuario2415803
fuente