.nav{position:relative}
.nav-indicator{position:absolute;left:0;bottom:-11px;height:4px;width:0;border-radius:3px;background:var(--lime);box-shadow:0 3px 12px rgba(214,255,56,.75);z-index:2;transition:transform .45s cubic-bezier(.22,.9,.28,1),width .45s cubic-bezier(.22,.9,.28,1);pointer-events:none;will-change:transform,width}

@media(min-width:681px){
  .nav a{padding:8px 2px;opacity:.55;transition:opacity .25s ease,color .25s ease}
  .nav a::after{content:'';position:absolute;left:0;right:0;bottom:-11px;height:3px;border-radius:2px;background:var(--ink);opacity:0;transition:opacity .25s ease}
  .nav a:hover{opacity:1}
  .nav a:hover::after{opacity:.14}
  .nav a.active{opacity:1;font-weight:800}
  .nav a.active::after{display:none}
}

@media(max-width:680px){
  .nav-indicator{display:none}
}