如何在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没有内容，因此不显示。