How to Create a Consistently Styled Pipe Separated List with CSS?

Question

I'm trying to create an inline list with pipe separators between list items using CSS. I've implemented the following CSS code:

.list .list--pipe {
    display: flex;
    flex-wrap: wrap;

    .list__item {
        padding: 0 20px 0 0;
    }

    .list__item::before {
        height: 22px;
        right: 9px;
        top: 2px;
        width: 1.5px;
    }

    .list__item:last-child::before {
        display: none;
    }
}

However, I'm encountering an issue where the width of the pipe separators seems to vary depending on the resolution. I've set a fixed width for the ::before pseudo-element, but it still appears inconsistent across resolutions. Sometimes when I zoom in or out, the pipes seem like they have the same 1.5px width, but often it seems to have differing widths.

Here's a picture of my problem:

What steps can I take to ensure that the pipe separators have a consistent width across different resolutions? Is there a more reliable approach to achieve this styling? I am expecting the pipe separators to have the same width on all screen sizes. Any insights or suggestions would be greatly appreciated.