I was working on a website when I noticed that the width of the pseudo elements I use as borders varies for some reason.
I have provided a minimal demo here.
.filters { display: flex; border-radius: 3px; margin-bottom: 1rem; /* margin-bottom: 0; */ width: fit-content; border: 1px solid black;}.filters>* { padding: 1em; position: relative;}.filters>*:not(:first-child)::before { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 1px; background-color: black;}/* This solves the problem for some reason */#narrow>*:not(:first-child)::before { width: 0.8px}/* This too, but only if you set the margin on the bottom of the filters to 0, see comment above */#margin { margin-inline: auto;}/* This too *//* This makes the last element wider instead */#font { margin-inline: auto; font-family: sans-serif}/*Sometimes the element that is wider changes after zooming in and out. I am starting to believe this has something to do with pixel placement on the screen. Maybe this effect occurs if an element is "between" two physical pixels and thus "takes up" both. */<div class="filters"><div> What</div><div> is</div><div> going</div><div> on?</div></div><div class="filters" id="narrow"><div> What</div><div> is</div><div> going</div><div> on?</div></div><div class="filters" id="margin"><div> What</div><div> is</div><div> going</div><div> on?</div></div><div class="filters" id="font"><div> What</div><div> is</div><div> going</div><div> on?</div></div>It changes based on the margins and font-families used, which seems even more arbitrary.
Giving the element in question a width of <=0.8px instead of 1px seems to resolve the issue, but what is the cause? I there a better way to prevent this?
Why use pseudo-elements and not borders?
My intent was creating a design like this:
As far as I know, there is no way to reduce the percentage of width or height a border takes up. That's why I used pseudo elements to achieve the partial-height border.
I do not want to give the element a margin as its background turns a solid color on hover and should take up the full height.