滑动悬停链接动画时的自动宽度

Question

正如您在我的代码（下面的链接）中看到的，我有一个从左到右滑动的链接动画。如何使下划线的宽度与链接“text”的宽度相同，而不会使下划线的宽度固定？

https://jsfiddle.net/erikos93/rkqst9s5/

HTML：

btnDone

CSS：

<a href="#" class="aboutlinks">Facebook</a>
<a href="#" class="aboutlinks">LinkedIn</a>
<a href="#" class="aboutlinks">Instagram</a>

<a href="#" class="aboutlinks">This is just some random text.</a>

事先谢谢！

//ë

Answer 1

将display: inline-block设置为每个链接，并在每个链接位置<br />后设置：https://jsfiddle.net/rkqst9s5/1/。