悬停a-href之前的动画行

Question

因此，我尝试创建动画线，将其悬停时将链接ca大约移动15px ...所以-该行之前不可见，但是当链接悬停时，它应显示并增大15px在右边。但是，似乎没有出现红色背景的span元素-为什么会发生这种情况？。

.link-animation {
    height: 2px;
    width: 0px;
    background-color: red;
}

.link:hover .link-animation {
    width: 15px;
}

<a class="link" href=""><span class="link-animation"></span>Animate on hover</a>