Cómo Personalizar los Símbolos de Listas con ::before en CSS

Contenido enriquecido y más claro:
Los pseudo-elementos CSS, como ::before, son herramientas muy útiles para agregar contenido visual o decorativo antes del contenido real de un elemento. En el caso de las listas (

), puedes eliminar el estilo por defecto y añadir cualquier símbolo personalizado, como un círculo, un triángulo o incluso un emoji.

En este ejemplo aprenderás a reemplazar el icono de viñeta tradicional por un símbolo personalizado utilizando el pseudo-elemento ::before y la propiedad content.

li {
  list-style: none;
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
}

li.triangle::before {
  content: "▲";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.75em;
  line-height: 1;
}

<ul>
  <li class="triangle">Texto</li>
</ul>