Cómo crear una card con viñetas personalizadas usando CSS

¿Qué vas a aprender?

En este tutorial te muestro cómo crear una card informativa utilizando HTML y CSS, enfocándonos específicamente en cómo personalizar las viñetas de una lista usando pseudo-elementos.

No aprenderás a copiar un diseño exacto, sino el proceso para que puedas aplicarlo a cualquier proyecto.

Paso 1: Definir la estructura HTML

Lo primero fue crear una estructura simple y semántica. Usé una etiqueta <section> como contenedor general y dentro una <div> para representar la card.

La card contiene:

Una imagen

Un texto descriptivo

Un título

Una lista de elementos

<section>
  <div class="card">
    <img src="img/mu.webp" alt="">
    <p>
      <span>Mu de Aries</span>, Caballero Dorado de gran sabiduría...
    </p>
    <h2>Técnicas</h2>
    <ul>
      <li>Crystal Wall...</li>
      <li>Starlight Extinction...</li>
      <li>Telequinesis...</li>
      <li>Restauración de armaduras...</li>
    </ul>
  </div>
</section>

Aquí la clave fue no agregar estilos en el HTML y dejar todo el diseño en CSS.

Paso 2: Dar forma a la card con CSS

Para que el contenedor se comportara como una card, definí un ancho fijo, padding y estilos visuales básicos.

.card {
  width: 300px;
  padding: 15px;
  background-color: blueviolet;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,.8);
}

Esto ayuda a que el contenido se vea separado del fondo y tenga jerarquía visual.

Paso 3: Ajustar imágenes y texto

La imagen principal se ajusta al ancho de la card para evitar desbordamientos.

.card img {
  width: 100%;
  border-radius: 10px;
}

Para el texto utilicé rem como unidad de medida, lo que facilita la escalabilidad del diseño.

Paso 4: Eliminar las viñetas por defecto

Antes de personalizar una lista, es necesario eliminar el estilo que trae el navegador.

.card ul {
  list-style: none;
  padding-left: 0;
}```



Esto me permitió controlar completamente el diseño de cada elemento de la lista.

Paso 5: Crear viñetas personalizadas con ::before

En lugar de usar list-style-image, opté por ::before para tener mayor control.

Primero, preparé cada <li>:

.card ul li {
position: relative;
padding-left: 28px;
font-size: 1.5rem;
color: white;
}```

Luego, agregué la imagen de la viñeta:

.card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 16px;
  height: 16px;
  background-image: url("../img/listado.png");
  background-size: contain;
  background-repeat: no-repeat;
}

Este método permite:

Ajustar tamaño y posición de la viñeta

Cambiar el icono fácilmente

Añadir animaciones o efectos en el futuro