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

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

先谢谢了！

//E

Answer 1

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