¿Cómo usar el símbolo de marca de verificación (✓) en lugar de viñetas en una lista desordenada?

82

Tengo una lista en la que quiero agregar un símbolo de marca antes del texto de la lista. ¿Existe algún CSS que pueda ayudarme a aplicar de esta manera?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

Nota: quiero esto en este tipo de código HTML

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
Expandir fragmento

css html special-characters Stack-overflow-hero
fuente

Respuestas:

144

Puede usar un pseudoelemento para insertar ese carácter antes de cada elemento de la lista:

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
Expandir fragmento

Josh Crozier
fuente
Usé esto y funciona en Chrome 65. Pude envolver cada <li> normalmente usando un borde sólido de 1px, flotar a la izquierda y margen a la derecha en ul li: antes - puedes establecer el color del borde en el fondo de tu elemento.
ymasood
¡Gracias por la solución! Agregué una nota de que la sangría se pierde al envolver. (Disculpas por editar la publicación, pero fue mejor para ilustrar el problema que solo dejar un comentario, y con suerte podemos encontrar una manera de lidiar con eso).
Dan Dascalescu
@Josh: La respuesta de Adam tiene una solución al problema de envoltura. Lo he editado para mayor claridad, depende de ti incluirlo.
Dan Dascalescu
32

A continuación, se muestran tres estilos de marcas de verificación diferentes que puede utilizar:

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul><!-- not working on Stack snippet; check fiddle demo -->
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
Expandir fragmento

jsFiddle

Referencias:

Michael Benjamin
fuente
Esta no es diferente a la respuesta de Josh Crozier, y sufre el mismo problema de destruir la muesca en la envoltura . Además, el último carácter no aparece en el violín tampoco en Chromium / Ubuntu, pero de todos modos ese es el punto: la respuesta de Josh es la esencia de la solución. Qué caracteres de marca de verificación usar es una elección de diseño.
Dan Dascalescu
1
@DanDascalescu, esta respuesta amplía la solución de Josh Crozier al proporcionar opciones de marca de verificación que algunas personas pueden no conocer. Esa es información valiosa. El hecho de que sean "opciones de diseño" no hace que esta respuesta sea menos útil. En mi opinión, su voto negativo no está justificado ya que: (1) la respuesta ha sido útil para muchas personas (y tiene casi 30 votos a favor), (2) la respuesta no pretende ser otra cosa que elecciones de estilo y (3) Yo no intentaba abordar ningún otro problema (que, como usted dice, está "además del punto de todos modos")
Michael Benjamin
1
Las opciones de marca de verificación que veo, "\ 2713" y "\ 2714", son puntos de código Unicode sin procesar. No puedo ver cómo se ven. Si la respuesta quiere dar opciones de estilo, puede incluir algunas marcas de verificación reales: ✓, ✔, ☑, ✅. Qué marca de verificación usar, no es un problema interesante. Cómo usar las marcas de verificación es. Lo veo como, "¿Cómo pinto un bote que está actualmente en el agua?", Versus "¿Qué tonos de azul puedo pintar?". ¿Tiene sentido?
Dan Dascalescu
Tiene derecho a ver esta respuesta desde la perspectiva que desee. No voy a discutir con tu opinión. Sin embargo, el hecho es que la gran mayoría de las personas que visitan esta publicación encuentran útil esta respuesta. Lo dejaré así. Gracias por la respuesta. @DanDascalescu
Michael Benjamin
2
La gente vota a favor por muchas razones diferentes. La gente vota por razones diferentes a las tuyas. Llega en desacuerdo con el contenido de esta respuesta. No está diciendo que la respuesta sea incorrecta o desactualizada (como en los enlaces a los que hizo referencia), simplemente no le gusta. Eso está bien para mí. Tienes derecho a tu opinión.
Michael Benjamin
22

Como complemento a la solución:

ul li:before {
 content: '✓'; 
}

Puede utilizar cualquier icono SVG como contenido , como Font Aswesome .

ingrese la descripción de la imagen aquí

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
Expandir fragmento

Nota: Para resolver el problema de envoltura que tenían otras respuestas:

  • reservamos 1,5 millones de ems de espacio a la izquierda de cada <li>
  • luego coloque el SVG al comienzo de ese espacio ( position: absolute; left: 0)

Aquí hay más iconos negros de Font Awesome .

Consulte este CODEPEN para ver cómo puede agregar colores y cambiar su tamaño.

Adam Orlov
fuente
6 
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

puedes usar este estilo css simple

ul {
     list-style-type: '\2713';
   }
Hitendra Singh Shekhawat
fuente
La respuesta de Adam tocó el problema de la envoltura, pero se necesitaron toneladas de código adicional ... esto simplemente funciona. El espaciado fue un toque para mí, así que acabé agregando un \ 1 \ 1 adicional al final para espaciar la marca de verificación fuera del <li>.
Jaden Baptista