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

Question

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

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

HTML：

<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> 

CSS：

事先

.aboutlinks { 
    color: #171717; 
    text-decoration: none; 
    position: relative; 
    display: block; 
    margin-bottom: 18px; 
} 

.aboutlinks:after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0%; 
    border-bottom: 2px solid #171717; 
    transition: 0.7s; 
} 

.aboutlinks:hover:after { 
    width: 100%; 
} 

谢谢！

//Ë

Answer 1

设置display: inline-block到每一个环节和每一个环节发生<br />后：https://jsfiddle.net/rkqst9s5/1/。