滑動懸停鏈接動畫的自動寬度

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