如何在div下放置轉換下劃線？

Question

我想讓一個容器div在點擊時得到一個藍色下劃線。

我發現了一個小提琴，我希望這將幫助我：

http://jsfiddle.net/gvpr9w06/

雖然我不能讓它工作，我的小提琴：

https://jsfiddle.net/gzp97yjo/

我的代碼：

Html：

<div class="AdministrationSettingsArea"> 
    <a href="#"> 
     <div class="linkContainer tablik"> 
      <div class="">Domains</div> 
     </div> 
    </a> 
    <a href="#"> 
     <div class="linkContainer tablik"> 
      <div class="">Something new</div> 
     </div> 
    </a> 
    <a href="#"> 
     <div class="linkContainer tablik"> 
      <div class="">Darkside</div> 
     </div> 
    </a> 
</div> 

的CSS：

.tablik { 
display: inline-block; 
cursor:pointer; 
} 

.AdministrationSettingsArea a .linkContainer{ 
    display: inline-block; 
    float: left; 
    width:33%; 
    padding:5px 10px; 
    text-align:left 


} 

.AdministrationSettingsArea a .linkContainer:hover{ 
    color:black; 
    background-color:#F1F1F1; 
} 

.tablik:after{ 
    display: block; 
    height: 5px; 
    width: 0; 
    background: transparent; 
    transition: width .5s ease, background-color .5s ease; 
} 

.tablik.AdmClicked:after{ 
    width: 100%; 
    background: blue; 
} 

腳本：

$(function(){ 
    $(".AdministrationSettingsArea a").on("click", function() { 
     console.log($(this).find(".tablik")); 
     if ($(this).find(".tablik").hasClass("AdmClicked")) return; 

     $(this).parent().find(".tablik").removeClass("AdmClicked"); 
     $(this).find(".tablik").addClass("AdmClicked"); 
    }) 

}) 

我在想什麼？

Answer 1

你從原來的丟失：

.tablik:after { 
    content: ''; 

所以:after沒有內容，因此不顯示。