CSS Tip

The Universal Focus Ring

Replace the default focus ring with a stylish one that travels between the elements as you navigate with your keyboard. A funny experiment* using Anchor Positioning.

html::after {
  content: "";
  position: fixed;
  position-anchor: --focus;
  inset: anchor(inside,0);
  outline: 2px solid darkred;
  transition: .4s;
}
*:focus-visible {
  outline: none;
  anchor-name: --focus;
}

Use Tab to navigate the demo below:

See the Pen Universal focus (use tab to navigate) by Temani Afif (@t_afif) on CodePen.

* To use with caution or not to use at all.

More CSS Tips