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

https://codepen.io/fristyr/pen/MRWaoY

Задача такова: Я бы хотел сделать чтобы кругу и ромбу (::before ::after) анимацию что то вроде рисования. Начало от 0 до того пока фигура не закончится и обратно. Возможно ли вообще такое для таких псевдоэллементов? Я пробовал через бордер радус и тени но они лишь делают анимацию всей фигуры сразу изза толщины, появляется а потом затухает. А нужно что то вроде линии которая идет он начала до конца рисуя фигуру