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?

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>

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.

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

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

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.

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

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.

ul {
    list-style-type: none;    
}

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

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

Prueba este código ...

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

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