使a：顯示後頁面處於活動狀態

Question

我有一個導航菜單。現在我想讓我的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; 
} 

Answer 1

嘗試使用此CSS代碼來使邊框居中並減小其寬度。

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