CSS 下划线未突出显示单击的链接

Question

我有两个链接，即“总用户”和“用户信息”。 默认情况下，“总用户”带有下划线，但是当我单击“用户信息”时，下划线会移动到点击的链接，然后再次返回其默认 position，即“总用户”。 有人可以帮我解决这个问题吗，我想在我点击的链接上加下划线

我的 HTML 代码：

---

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

---

我的 CSS 代码：

---

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; 
}

---

Answer 1

我做了这样的事情，它奏效了。 玩弄左边距，用 0 启动左边距，然后在单击第二个链接时将其移动 100 像素，并在单击第一个链接时将其移回 0。 密码箱

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;
 }

Answer 2

改变

text-decoration: none;

至

text-decoration: underline;

Answer 3

我建议您使用background-image: linear-gradient()而不是使用更容易的hr标签。

 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" class="one"> Total Users </a> <a routerLink="usersInformation" routerLinkActive="active" id="dos" class="two"> Users Information </a> </nav>