Símbolo de viñeta personalizado para elementos <li> en <ul> que es un carácter normal y no una imagen

Me doy cuenta de que uno puede especificar un gráfico personalizado para que sea un carácter de viñeta de reemplazo, usando el atributo CSS:

list-style-image

Y luego dándole una URL.

Sin embargo, en mi caso, solo quiero usar el símbolo '+'. No quiero tener que crear un gráfico para eso y luego señalarlo. Prefiero indicar a la lista desordenada que use un símbolo más como símbolo de viñeta.

¿Se puede hacer esto o me veo obligado a hacer un gráfico primero?

Lo siguiente se cita de las listas de domesticación :

Puede haber ocasiones en las que tenga una lista, pero no desee viñetas o desee utilizar algún otro personaje en lugar de la viñeta. Nuevamente, CSS proporciona una solución sencilla. Simplemente agregue el estilo de lista: ninguno; a su regla y obligar a las LI a mostrar con sangrías colgantes. La regla se verá más o menos así:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

El margen o el margen deben establecerse en cero, y el otro en 1em. Dependiendo de la "viñeta" que elija, es posible que deba modificar este valor. La sangría de texto negativa hace que la primera línea se mueva hacia la izquierda en esa cantidad, creando una sangría colgante.

El HTML contendrá nuestra UL estándar, pero con cualquier carácter o entidad HTML que desee utilizar en lugar de la viñeta que precede al contenido del elemento de la lista. En nuestro caso usaremos », la cita de doble ángulo recto:».

»Artículo 1
» Artículo 2
»Artículo 3
» Artículo 4
»Artículo 5 haremos
   un poco más de tiempo para que
   se ajuste

Esta es una respuesta tardía, pero acabo de encontrar esto ... Para obtener la sangría correcta en cualquier línea que se ajuste, intente de esta manera:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

Tantas soluciones
Pero sigo pensando que hay margen de mejora.

Ventajas:

• código muy compacto
• funciona con cualquier tamaño de fuente
  (no contiene valores absolutos de píxeles)
• alinea las filas perfectamente
  (sin desplazamiento leve entre la primera línea y las siguientes)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}

<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

Esta es la solución W3C. Funciona en Firefox y Chrome.

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

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }

  <ul><li>item</li></ul>

Aquí está la mejor solución que he encontrado hasta ahora. Funciona muy bien y es cross-browser (IE 8+).

ul {
    list-style: none;
    margin-left: 0;
    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.

Puede usar el :beforepseudo-selector para insertar contenido delante del elemento de la lista. Puede encontrar un ejemplo en Quirksmode, en http://www.quirksmode.org/css/beforeafter.html . Lo uso para insertar comillas gigantes alrededor de las comillas en bloque ...

HTH

Mi solución utiliza el posicionamiento para que las líneas ajustadas se alineen automáticamente correctamente. Por lo tanto, no tiene que preocuparse por configurar el relleno directamente en el li: before.

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}

<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Es aconsejable calificar el estilo del archivo <li>para que no afecte los <ol>elementos de la lista. Entonces:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

Font-awesome ofrece una excelente solución lista para usar:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

Em estilo de guión:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

Prefiero usar margen negativo, te da más control

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

Curiosamente, no creo que ninguna de las soluciones publicadas sea lo suficientemente buena, porque se basan en el hecho de que el personaje utilizado es de 1em de ancho, lo que no necesariamente tiene que ser así (con tal vez la excepción de la respuesta de John Magnolia que, sin embargo, utiliza flotadores que pueden complicar las cosas de otra manera). Aquí está mi intento:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Esto tiene estas ventajas (sobre otras soluciones):

1. No depende del ancho del símbolo como se ve en el ejemplo. Usé dos caracteres para mostrar que funciona incluso con viñetas anchas. Si intenta esto en otras soluciones, obtiene el texto desalineado (de hecho, incluso es visible con el símbolo * en los zooms más altos).
2. Te da un control total del espacio utilizado por las balas. . Puede reemplazar 30px por cualquier cosa (incluso 1em, etc.). Simplemente no olvides cambiarlo en los tres lugares.
3. Si le da el control total de posicionamiento de la bala . Simplemente reemplace el text-align: center;por cualquier cosa a su gusto. Por ejemplo, puede intentarlo color: red; text-align: right; padding-right: 5px; box-sizing: border-box; o, si no le gusta jugar con border-box, simplemente reste el ancho (5px) del ancho (es decir, ancho: 25px en este ejemplo). Hay muchas opciones.
4. No utiliza flotadores, por lo que puede estar contenido en cualquier lugar.

Disfrutar.

prueba esto

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>