What's the bug with :after?

Question

css

The same code.
First, here https://jsfiddle.net/8w7hqqhe/2/
Displayed joxi.ru/vAWYaWzU18PGQm
As you can see, there is a space between the link and :after.
Then I add the same code to the html file, open it joxi.ru/brR8WgzuJxPNp2
And there are no spaces.
What could be the problem?
UPD: If this block is in one line in the code

<li class="breadcrumbs__item"><a href="#" class="breadcrumbs__item-link">Главная</a></li>

then there is no gap.
If broken down by lines

<li class="breadcrumbs__item">
     <a href="#" class="breadcrumbs__item-link">Главная</a>
</li>

then he appears.

Answer 1

Because spaces affect the layout of inline elements .
0 spaces in the code: 0 resulting in
1 space in the code: 1 resulting in
2 spaces in the code: 1 resulting in
3 spaces in the code: 1 resulting in
4 spaces...
In short, magic *whoop*