Html 当页面处于活动状态时，使a:after显示

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

我有这个css

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

这是它的样子。现在我想要的是页面处于活动状态时的情况。这仅在将鼠标悬停在任何菜单上时触发

这是它的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;
}

---

在这里发布HTML代码，MichaelWhen，你会考虑一个页面是“活跃的”吗？这个链接可能是有用的，如果你可以使用JS@ DavithOMA，当我在页面上，例如IM在另一个页面上，效果将进一步可见。