Tarjetas clicables y accesibles

April 21, 2021 — #Accesibilidad #CSS

Disposición de tarjeta donde la tarjeta en sí no es un enlace, pero toda la tarjeta es clicable (mediante un pseudo-elemento :before sobre el <a> principal). Los enlaces dentro de la tarjeta siguen siendo clicables.

CSS

.grid__item {
  &:hover,
  &:focus-within {
    background-color: #eee;
  }

  a {
    position: relative;
    z-index: 1;
  }

  h2 {
    a {
      position: static;

      &:hover,
      &:focus {
        color: blue;
      }

      &:before {
        content: '';
        display: block;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: background-color 0.1s ease-out;
        background-color: transparent;
      }
    }
  }
}