【hover】左からボーダーラインを引きたい

Question

hoverアクションについてです。
nav部分に左からすっとボーダーラインを引く動作を付けたいのですが、機能しません。
どこが間違っているのでしょう…？

<header>
        <nav>
            <ul>
                <li><a href="#">NEW IN</a></li>
                <li><a href="#">COLLECTION</a></li>
                <li><a href="#">LOOKBOOK</a></li>
                <li><a href="#" class="title">LAMINA</a></li>
                <li><a href="#">OUR STORY</a></li>
                <li><a href="#">NEWS</a></li>
                <li><a href="#">STORES</a></li>

            </ul>
        </nav>
</header>

header{
    width: 1600px;
    height: 95px;
}
header ul{
    text-align: center;
}
header ul li{
    font-family: 'Bodoni URW';
    font-weight: lighter;
    display: inline-block;
    margin-right: 35px;
    line-height: 95px;
    letter-spacing: 0.3em;
    vertical-align: top;
}
header ul li a{
    font-size: 1.5rem;
    color: #333333;
    text-decoration: none;
    position: relative;
}
header ul li a::after{
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #333333;
    transition: all 0.3s ease 0s;
}
header ul li a:hover{
    opacity: 0.7;
}
header ul li .title{
    margin: 0 60px;
    font-size: 3.6rem;
    font-weight: bold;
}
header ul li:last-child{
    margin-right: 0;
}

Answer 1

header ul li a:hover::after{
    width: 100%;
}

Comments

[kumazou]

あ～～。。hover指定していないとそりゃ機能しませんよね(;^_^A
凡ミスでした。
回答ありがとうございます！