Можете ли вы сделать «невидимую рамку»?

Я пытаюсь создать панель навигации в качестве упражнения.

Я использую a: hover , чтобы выделить сплошную рамку вокруг кнопки, на которой наведен курсор . Однако при этом все остальные кнопки перемещаются по размеру границы.

Как правильно решить эту проблему? Я знаю, что есть и другие (обсуждаемые здесь ), Я специально пытался сделать границу «невидимой, но занимающей место, даже если не зависать». Я установил border: transparent в надежде, что он может делать то, что я хочу, но он вообще не показывал занимаемого места.

Я знаю, что могу вручную выбрать цвет границы, равный цвету фона, и сделать это твердо, но я не этого хочу. Есть ли разумный способ решить эту проблему?