Los pseudo-elementos normalmente se utilizan para añadir contenido estético a un elemento usando la propiedad content. El elemento :before siempre se muestra antes del contenido.

li {
  list-style: none;
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
  
  &:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    font-size: .75em;
  }
}
li.triangle:before { content: "◉"; }

Como implementarlo:

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

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css