tipos - ol html

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

Question

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

list-style-image

Y luego darle 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 simplemente ordenar 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?

Answer 1

Aquí está la mejor solución que he encontrado hasta ahora. Funciona muy bien y es un navegador cruzado (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 personaje 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 deseas para tu personaje, cámbialo para tus necesidades.

Answer 2

Curiosamente, no creo que ninguna de las soluciones publicadas sea lo suficientemente buena, ya que se basan en el hecho de que el personaje utilizado tiene 1em de ancho, lo que no tiene por qué ser así (con la excepción de la respuesta de John Magnolia que 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 se basa en el ancho del símbolo como se ve en el ejemplo. Usé dos caracteres para mostrar que funciona incluso con balas anchas. Si prueba esto en otras soluciones, obtendrá el texto desalineado (de hecho, incluso es visible con el símbolo * en zooms más altos).
2. Te da un control total del espacio utilizado por las balas . Puedes reemplazar 30px por cualquier cosa (incluso 1em, etc.). Simplemente no te olvides de cambiarlo en los tres lugares.
3. Si le da control total del posicionamiento de la bala . Simplemente reemplace el text-align: center; por cualquier cosa a su gusto. Por ejemplo, puedes probar color: red; text-align: right; padding-right: 5px; box-sizing: border-box; color: red; text-align: right; padding-right: 5px; box-sizing: border-box; o si no te gusta jugar con border-box, simplemente resta el relleno (5px) del ancho (es decir, ancho: 25px en este ejemplo). Hay muchas opciones.
4. No usa flotadores, por lo que puede estar contenido en cualquier lugar.

Disfrutar.

Answer 3

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

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

Answer 4

Esta es la solución W3C. Por el momento, esto funciona al menos en Firefox.

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

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

Answer 5

Esta es una respuesta tardía, pero descubrí esto ... Para corregir el sangrado en cualquier línea que se ajuste, pruébelo 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;
}

Answer 6

Font-awesome ofrece una gran 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>

Answer 7

Lo siguiente es citado de Taming Lists :

Puede haber ocasiones en las que tenga una lista, pero no quiere ninguna viñeta, o desea usar algún otro personaje en lugar de la viñeta. Nuevamente, CSS proporciona una solución directa. Simplemente agregue el estilo de lista: ninguno; a su regla y forzar a los 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;
}

O bien el relleno o el margen debe establecerse en cero, con el otro configurado en 1em. Dependiendo de la "viñeta" que elija, puede necesitar 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 francesa.

El HTML contendrá nuestro estándar UL, 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 utilizaremos », la cita de doble ángulo correcta:».

" Artículo 1
»Artículo 2
»Artículo 3
»Artículo 4
»El punto 5 lo haremos
un poco más de largo para que
se envolverá

Answer 8

Mi solución usa posicionamiento para que las líneas envueltas se alineen automáticamente correctamente. Así que no tiene que preocuparse por configurar el relleno, justo en el li: antes.

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>

Answer 9

Prefiero usar el margen negativo, le da más control

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

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

Answer 10

Puede usar :before pseudo-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 en blockquotes ...

HTH.

Answer 11

Tantas soluciones
Pero todavía creo que hay margen de mejora.

Ventajas:

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

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>

Answer 12

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>

Answer 13

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: ''—  ''; /* em dash */
}
.list-bullet li:before {
    content: ''• ''; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}

<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>