如何沿左右边距完美对齐线条边界

我已经在使用文本对齐:对齐

HTML

    <span class="lb"> fkdjfkdsjfds  fjkdsjfksd. fjkdkkkkkkkkkkkkkk</span>
    <span class="lb">dgggggggggggg  dddddddddddddddddddd  kkkkklllll</span>
    <span class="lb">kkkkkkkkkkkk  dddddddddddddddd  ttttttttt:  dddd </span>
    <span class="lb"> lllllllllll dddddddddddddddddd  ffffffffffffff</span>

CSS(无伪元素)

.lb{
      text-align: justify;
      display: block;
      width: 390px;
    }

这将输出沿左边缘对齐的行: https://jsfiddle.net/h0qwbwve/10/

添加以下psuedo元素:

.lb:after  {
content: " ___________________________________________________________________________________________________________________________________________________________";
line-height: 0;
visibility:hidden;
}

我在Chrome和EDGE中沿着左右边距获得完美对齐: https://jsfiddle.net/h0qwbwve/11/

我希望了解这个伪元素实际上在做什么,特别是因为我想构建/调整它,使它在Firefox和Safari上也能做“正确”的事情,否则至少有理由相信在Chrome和EDGE中的行为可能保持不变。