JSFiddle - React, Tailwind, and code Playground

by momenelkamri

HTML

<ul>
<li><a href="#">dasdasdas sadasda asdasdas asdasda</a></li>
<li><a href="#">dasdasdas sadasda asda</a></li>
<li><a href="#">dasdasdas sadasda asdas asdasda sadasd</a></li>
</ul>

SCSS

a {
  text-decoration: none;
  position: relative;
}
ul {
  width: 200px;
  list-style:none;
}

li {
  a:hover {
   box-shadow: inset 0 -1px 0 #003082; 
  }
}

li a:focus {  
  /* outline:none; */
  outline-offset: 4px;
  outline-style: auto;
  outline-color: #0063d3;
  /* border-radius: 4px; */
}

li a:focus::before {    
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 4px;
    border: 1px solid #0063d3;
    box-shadow: 0 0 0 1px #0063d3, 0 2px 28px rgb(0 0 0 / 10%);
}