style - Personaliza las viñetas de elementos de la lista usando CSS

ul css

Question

¿Es posible cambiar el tamaño de la viñeta de un elemento <li> ?

Echa un vistazo al siguiente código:

li {
    list-style: square; // I want to change the size of this squared bullet. 
}

Parece que no puedo encontrar ninguna manera de lograr eso.

Answer 1

¿Te refieres a alterar el tamaño de la bala, supongo? Creo que esto está ligado al tamaño de fuente de la etiqueta li. Por lo tanto, puede explotar el tamaño de fuente para el LI, luego reducirlo para un elemento contenido en el interior. Algo así como para agregar el margen de beneficio adicional, pero algo como:

li {font-size:omgHuge;}
li span {font-size:mehNormal;}

Alternativamente, puede especificar un archivo de imagen para sus viñetas de lista, que podría ser tan grande como desee:

ul{
  list-style: square url("38specialPlusP.gif");
 }

Consulte: http://www.w3schools.com/css/css_list.asp

Answer 2

Basado en la respuesta de @dzimney y similar a la respuesta de @Crisman (pero diferente):

Esa respuesta es buena pero tiene un problema de sangría (las balas aparecen dentro del alcance de li ). Probablemente no quieres esto. Vea la lista de ejemplos simples a continuación (esta es una lista HTML predeterminada):

• Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. En mi quaestio honestatis, el dúo ha sido otorgado a persecuti ei. Etiam nusquam cu su, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.

• Quem suscipiantur no eos, sed impedit explicary ea, falli inermis comprensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Cuento sint ex su, ipsum essent appellantur et cum.

Pero si usa la respuesta mencionada, la lista será como se muestra a continuación (ignorando el tamaño de las viñetas):

• Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. En mi quaestio honestatis, el dúo ha sido otorgado a persecuti ei. Etiam nusquam cu su, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.

• Quem suscipiantur no eos, sed impedit explicary ea, falli inermis comprensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Cuento sint ex su, ipsum essent appellantur et cum.

Así que recomiendo este enfoque que resuelve el problema:

li {
    list-style-type: none;
    position: relative;    /* It is required for setting position to absolute in the next rule. */
}

li::before {
    content: ''/2022'';      /* Unicode for • character */
    position: absolute;
    left: -0.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
}

<ul>
    <li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
    <li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>

Answer 3

Debe utilizar una imagen para cambiar el tamaño real o la forma de la viñeta:

Puede usar una imagen de fondo con el relleno adecuado para empujar el contenido para que no se superponga:

list-style-image:url(bigger.gif);

o

background-image: url(images/bullet.gif);

Answer 4

Dependiendo del nivel de compatibilidad de IE necesario, también puede usar: antes del selector con el estilo de viñeta establecido como propiedad de contenido.

li {  
  list-style-type: none;
  font-size: small;
}

li:before {
  content: ''/2022'';
  font-size: x-large;
}

Es posible que tenga que buscar el ASCII HTML para el estilo de viñeta que desea y usar un converter para el valor hexadecimal de CSS.

Answer 5

En caso de que no quiera envolver el contenido de sus <li> s con <span> s, también puede usar :before esto:

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: ''/2022'';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}

Ajuste sus tamaños de fuente en :before de lo que quiera.

<ul>
  <li class="huge">huge bullet</li>
  <li class="small">smaller bullet</li>
  <li class="huge">multi line item with custom<br/> sized bullet</li>
  <li>normal bullet</li>
</ul>

Answer 6

Otra forma de cambiar el tamaño de las balas sería:

1. Deshabilitando las balas por completo.
2. Volver a agregar las viñetas personalizadas con la ayuda de ::before pseudo-elemento.

Ejemplo:

ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          '' ''
}

<ul>
  <li>first element</li>
  <li>second element</li>
</ul>

No se necesitan cambios de marcado

Answer 7

Puede envolver el contenido de la li en otro elemento, como un span . Luego, li a li un tamaño de font-size mayor y establezca un font-size normal en el span :

http://jsfiddle.net/RZr2r/

li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
</ul>

Answer 8

Si envuelve el contenido de <li> en una <span> u otra etiqueta, puede cambiar el tamaño de la fuente de <li> , lo que cambiará el tamaño de la viñeta, luego restablecerá el contenido de <li> a su original tamaño. Puede usar unidades em para cambiar el tamaño de la viñeta <li> proporcionalmente.

Por ejemplo:

<ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

Entonces CSS:

li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}

Un ejemplo más complejo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>List Item Bullet Size</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
ul.disc li {
    list-style-type: disc;
    font-size: 1.5em;
}

ul.square li {
    list-style-type: square;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}
    </style>
</head>
<body>

<h1>First</h1>
<ul class="disc">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

<h1>Second</h1>
<ul class="square">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

</body>
</html>

Resultados en:

Answer 9

Supongo que te refieres al tamaño de la viñeta al comienzo de cada elemento de la lista. Si ese es el caso, puedes usar una imagen en lugar de ella:

list-style-image:url(''bigger.gif'');
list-style-type:none;

Si se refería al tamaño real del elemento li , entonces puede cambiarlo como normal con width y height .

Answer 10

<ul>
    <li id="bigger"></li>
    <li></li>
    <li></li>
  </ul>

  <style>
     #bigger .li {height:##px; width:##px;}
  </style>