为什么flex内容在内容包装时有空格

Question

我创建了一些带有css箭头的链接，除了链接的文本换行之外，它正如我所期望的那样工作。 箭头显示在链接文本之后，除非链接文本换行，然后文本和箭头之间存在我不想要的空白区域。默认的justify-content是flex start，所以我认为这不是一个flex box问题，但是我误解了带有包装文本的元素的大小。

这个html演示了如果你缩小浏览器的问题：箭头就在文本的旁边，直到它换行，然后它在文本的右边，直到窗口缩小到足以将它带到文本的旁边再次。理想情况下，我希望箭头保持附加到文本的右端。

body {
  font-size: 160%;
}

a {
  background: lightgreen;
  display: flex;
  align-items: flex-start;
}

a:after {
  content: '';
  vertical-align: middle;
  border: 0.6em solid transparent;
  border-left-color: inherit;
}

<a href="#">A link to somewhere</a>