JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div>
  <a href="/">link</a>
</div>

CSS

div {
  display: grid;
  min-height: 200px;
  background: grey;
  grid-template-areas: ". . ." ". link ." ". . .";
  grid-template-rows: 1fr min-content 1fr;
  grid-template-columns: 1fr min-content 1fr;
  column-gap: 1rem;
  position: relative;
}

div > a {
  grid-area: link; 
}

div > a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #F002;
}

div > a:hover::after {
  background: #F008;
}

div > a:focus::after {
  outline: 2px solid red;
}