Snippet to display border buttom sliding from left toright

slideright-border-effect.css

.nav-links {
    text-decoration: none;
    color: grey;
    margin: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    position: relative; /* Ensure proper positioning of pseudo-element */
  }
  
  .nav-links::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Start with no width */
    height: 3px; /* Border thickness */
    background-color: #431695;
    transition: width 0.5s ease; /* Transition width property for fade-in effect */
  }
  
  .nav-links.active::before,
  .nav-links:hover::before {
    width: 100%; /* Set width to 100% to fade in from left to right */
  }