html - una - ✓ ascii

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

Question

Tengo una lista en la que quiero agregar el símbolo de marca antes del texto de la lista. ¿Hay 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>

Answer 1

Aquí hay tres estilos diferentes de marca de verificación que puedes usar:

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>

jsFiddle

Referencias:

• ¿Cuál es el efecto del contenido: "/ 0020"; ¿propiedad?
• http://nealchester.com/special-characters/#checkmarks

Answer 2

Como una adición:

Puede usar marcas de verificación mejor hechas https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/check.svg o cualquier otro icono de la fuente impresionante usando

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

Solución

Prueba esto:

ul {
   list-style: none;
}
li {
  position: relative;
  padding-left: 40px;
}
li:before {
  position: absolute;
  top: 5px;
  left: 0;
  content: '' '';
  width: 50px;
  height: 50px;
  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;
}

Aquí puede encontrar todos los iconos que puede usar: https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg

Answer 3

Puede usar un pseudo-element 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>