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

125

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?

html  css  webkit  mobile-webkit 
— idStar
fuente

Respuestas:

81

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

— TJ WealthEngine API Evangelist
fuente
1
Su solución funcionó, en combinación con: antes del pseudo-selector al que usted y @Tieson T. apuntan. Me gustó que dijera cómo funcionan los diversos atributos en <UL> en concierto para imitar la sangría de bala.
— idStar
9
Así es como lo armé, que funcionó: ul {font-size: 14px; altura de línea: 16px; estilo de lista: ninguno; margen izquierdo: 0; relleno-izquierda: 1em; sangría de texto: -1em; } li: before {content: "+"; } Tuve que poner un espacio después del símbolo +, pero se ve razonablemente bien alineado.
— idStar
66
Desafortunadamente con este método, el signo de viñeta se incluye en las selecciones, que no es el caso de las viñetas normales.
— Konrad Höffner el
169

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;
}
— Mike T
fuente
1
Para mí, funciona mejor usar ch como la unidad de medida, específicamente para tener text-indent: -2chen cuenta el signo + y el espacio después de él, y luego padding-right: 1chagregar ese espacio. Aún así, un gran +1.
— cobaltduck
44

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>
Expandir fragmento

— Jpsy
fuente
2
este es el mejor
— user3168511
1
Esta es una mejor respuesta en mi opinión porque señala cómo puede personalizar otros detalles también. ¡Y también tiene el "Fragmento de código de ejecución" adjunto!
— Ionuț Ciuta
1
Esta debería ser la respuesta. Limpio y simple
— EvilDr
1
Estaba buscando una solución usando una imagen e intenté muchas respuestas, ¡pero esta funcionó mejor para mí! Pude usar content: url('link-to-my-asset.svg');y establecer el ancho de la imagen y el relleno entre la viñeta y el contenido. ¡Gracias!
— AnnieP
Esta es una buena respuesta. Sin embargo, necesitaba una solución que también admitiera el recuento de columnas
— admitiera el
29

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>
Expandir fragmento

— PHPst
fuente
2
Aunque parece funcionar en las versiones actuales de Firefox, el resultado es extremadamente feo: la viñeta personalizada se coloca justo en frente del contenido del texto (encajándolo), casi como si li:before {content:"…";}se usara sin ninguna otra sangría y alineación.
— Anton Samsonov
19

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.

— NicolasBernier
fuente
Esta es fácilmente la mejor solución que he encontrado.
— Charles Roper
ab-uso de floatnuevo? ... naah
10

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>
Expandir fragmento

— usuario648519
fuente
8

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;
}
— silverliebt
fuente
8

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>
Expandir fragmento

— sdw
fuente
4 

.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>
Expandir fragmento

— Beto
fuente
Hasta votó esto solo por / * copiar y pegar una viñeta de HTML en el navegador en CSS (sin usar códigos
— ASCII
2

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*/
}
— dmartinezfernandez
fuente
1

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;
}
— John Magnolia
fuente
1

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>
Expandir fragmento

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.

— Gorn
fuente
1 

.single-before {
  list-style: "👍";
  list-style-position: outside!important;
}
<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>
Expandir fragmento

— Viraj Giri
fuente
Gracias. Esto está muy limpio y me olvidé de lo !importantque fue vital para que mi CSS personalizado en Blogspot funcionara
— Velkoon
-2

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>
Expandir fragmento

— Venkat
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.