html - 在页面处于事件状态时显示a:after

我有一个导航菜单。现在，我想在页面处于活动状态时显示a：after。我可以在活动时控制a，但之后不会显示。

我有这个html CSS。

.navbar-nav > .active > a, .navbar-nav > .active > a > .active {
  color: #337AB7;
}

在这里看起来是like。现在，当页面处于活动状态时，我想要的是this之类的东西。仅在将鼠标悬停在任何菜单上时才会触发。

这是它的CSS。

.nav>li>a::after {
  position: absolute;
  top: 100%;
  left: 40%;
  width: 20%;
  height: 4px;
  background: rgba(9,49,113,1);
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  transform: translateY(10px);
  margin-top: -13px;
}

最佳答案

尝试使用此CSS代码将边框居中并减小边框的宽度。

.navbar-nav > .active > a:after
{
  color: #337AB7;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 5px;
  border-bottom: 3px solid #093171;
}