JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
    </div>

CSS

.parent{
  border:1px solid red;
  display:inline-block;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
}

.parent a:hover{
  border:1px solid #ddd;
  width:120%;
}