Как расположить псевдоэлемент за родителем?

Следующая задача:
По задумке дизайнера, у каждой кнопки есть обводка, смещенная относительно неё на несколько пикселей и находящаяся за ней.
Пытаюсь сделать это псевдоэлементами, но обводка остается над кнопкой.
Пробовал решить z-index'ом, но безрезультатно.
Есть ли способ решить данную задачу без создания дополнительного блока в html, только с помощью псевдоэлемента?
Код здесь: https://codepen.io/wansmer/pen/ZEEearP

В рамках поставленного вопроса сработал z-index: -1, но, видимо, я не совсем правильно сформулировал:
теперь получается, что рамка уходит за все элементы, т.е. если добавить родителя для кнопки, то рамку не видно вовсе.
Как такую ситуацию решить?