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にはコンテンツがありませんので、表示されません。