如何修复箭头和多行文字之间的空白区域？

Question

在flexbox块中，我有多行文字，这个文字填充所有宽度

<div class="list">
  <div class="item">Lorem</div>
  <div class="item">Lorem ipsum</div>
  <div class="item">Lorem ipsum dolor sit amet</div>
  <div class="item">Lorem</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur</div>
</div>

.list {
    width: 160px;
    padding-right: 10px;
    border: 1px solid #000;
}

.item {
    display: flex;
    margin-bottom: 15px;
    line-height: 1.5;
}

.item::after {
    content: "→";
    align-self: center;
}

https://codepen.io/in-in/pen/XVBqLw