Например можно сделать так:
В примере выше - "позиция" каждого псевдоэлемента зависит от его размера.
Конечно можно изменить значение переменной для смещения элемента:
- --pseudo-offset: calc((0px - (var(--pseudo-size) / 2)) - 1px);
+ --pseudo-offset: calc(0px - (var(--pseudo-size) / 2));
Разница заключается в том, что в этом варианте нет дополнительного пикселя, который как бы слегка нормализует позиционирование.
Ну или вообще можно задавать смещение для псевдоэлементов вручную:
- --pseudo-offset: calc((0px - (var(--pseudo-size) / 2)) - 1px);
+ --pseudo-offset: -8px;
В целом конечно есть и другие варианты решения без создания лишних элементов и так далее, но я думаю что и такого варианта будет достаточно для примера.
