Why is there a gap between the before and after lines?

Question

css

In all browsers except this sandbox (for some reason, maybe because the window is small) the same problem - on the next hover (not every time) there is a gap of 1px between before and after. I noticed that this changes when changing the words in the menu, i.e. this bug(?) is affected by menu width or word position. Actually a question is a bug of browsers or an error in the code? I noticed a similar bug: when I put the bottom border through the pseudo-element (as in the example) at 1px, at some heights it is displayed as 1px, and at some (for example, if I indent 1px below) 2px.
https://jsfiddle.net/a6r3dgp9/13/

Answer 1

At you the fractional part of pixels is rounded off. With this information, you can come up with a solution, such as increasing the length of one line by 1.