スライディングホバーリンクアニメーションの自動幅

Question

私のコード（下のリンク）でわかるように、左から右にスライドするリンクアニメーションがあります。下線の幅をリンク "text"と同じ幅にするには、下線の幅を固定しないでください。

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%; 
} 

感謝を事前に！

// E

Answer 1

各リンクに、各リンク先<br />後に設定display: inline-block：https://jsfiddle.net/rkqst9s5/1/。