CSS underline is not highlining the clicked link-CodePudding

I have two links namely "Total Users" and "Users Information". By default "Total Users" is underlined but when I click on "Users Information" the underline moves to that clicked link and then comes back again to its default position ie "Total Users". Can someone please help me with this, I want to underline to stay on the link that I've clicked

My HTML code:

<nav>
  <a style="margin-left: 140px;" 
    routerLink="totalUsers" 
    routerLinkActive="active" id="uno" >
      Total Users
  </a>
  <a routerLink="usersInformation"
   routerLinkActive="active" id="dos" >
     Users Information
  </a>
  <hr/>
</nav>

My CSS code:

a {
display: inline-block;
width: 11%;
text-decoration: none;
color: #333;
}

#uno:focus ~ hr {
margin-left: 140px;
}
#dos:focus ~ hr {
margin-left: 22.1% !important;
width: 10.3% !important; 
}

hr {
height: 0.2rem;
width: 6.5%;
margin-left: 140px ;
margin-top: 0;
background: #d9534f;
border: none;
transition: 0.3s ease-in-out; 
}

CodePudding user response：

I did something like this and it worked. Played around with margin-left, initiating margin-left with 0 and then moving it 100px on clicking second link and back to 0 on clicking the first link. codesandbox

hr {
   height: 0.2rem;
   width: 6.5%;
   margin-left: 0;
   margin-top: 0;
   background: #d9534f;
   border: none;
   transition: 0.3s ease-in-out;
  }
#two:focus ~ hr {
   margin-left: 100px;
 }
#one:focus ~ hr {
   margin-left: 0px;
 }

CodePudding user response：

I would suggest you to use background-image: linear-gradient() instead of using hr tag which is much easier.

a {
  width: 11%;
  text-decoration: none;
  color: #333;
  display: inline-block;
  background-image: linear-gradient( #d9534f, #d9534f);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0% 4px;
  cursor:pointer;
}

.one:active{
background-size:50% 4px;
}
.two:active{
background-size:100% 5px;
}

<nav>
  <a style="margin-left: 140px;" routerLink="totalUsers" routerLinkActive="active" id="uno" >
      Total Users
  </a>
  <a routerLink="usersInformation" routerLinkActive="active" id="dos" >
     Users Information
  </a>

</nav>