在悬停时没有使用chrome的中间下划线

Question

当我将鼠标悬停在不同的部分上时，我的导航栏会产生影响，并且几小时前它在所有浏览器上运行良好。我不知道我改变了什么，但它突然停止在谷歌Chrome上工作，但在所有其他浏览器上工作正常。知道发生了什么事吗？行动中问题的GIF。 http://i.imgur.com/hmKmbBQ.gifv

<nav class="topNav">
        <ul class="noStyle">

            <li><a class="sliding-middle-out" href="/about">About Me</a></li>

            <li><a class="sliding-middle-out" href="/bitcoin">Bitcoin</a></li>

            <li><a class="sliding-middle-out" href="/photography">Photography</a></li>

            <li><a class="sliding-middle-out" href="/contact">Contact</a></li>

            <li class="mainDrop">

                <a class="sliding-middle-out" href="#">Projects</a>
                <ul>    
                    <li><a class="sub" href="/photography">iOS</a></li>
                    <li><a class="sub" href="/contact">Design</a></li>
                    <li><a class="sub" href="processing/index.html">Processing</a></li>
                </ul>
            </li>


        </ul>
    </nav>

这里有造型

.topNav {
    width:80%;
    margin:auto;
    list-style-type:none;
    text-align:center;
    padding-top:50px;
    padding-bottom:50px;
}
.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
    text-decoration:none;
    color:white;
    padding:15px 30px;
    text-transform:uppercase;
    font-family:sans-serif;
    letter-spacing:.3em;
    font-size:.7em;
    font-weight:bold;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background: white;
}

非常感谢任何帮助！