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

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