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