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

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

HTML:

事先谢谢

---

//E

设置

显示：将内联块

设置到每个链接，并在每个链接后放置

：。

谢谢！这让我很生气。我知道这是一个可笑的简单解决办法！

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

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