Задача такова: Я бы хотел сделать чтобы кругу и ромбу (::before ::after) анимацию что то вроде рисования. Начало от 0 до того пока фигура не закончится и обратно. Возможно ли вообще такое для таких псевдоэллементов? Я пробовал через бордер радус и тени но они лишь делают анимацию всей фигуры сразу изза толщины, появляется а потом затухает. А нужно что то вроде линии которая идет он начала до конца рисуя фигуру
Можно нарисовать что угодно внутри одного единственного псевдоэлемента, через svg и data -
Т.е. делаете svg, анимируете его как хотите, переделываете в data url и запихуеваете в background, вуаля.
За рациональность и производительность не ручаюсь.
С квадратом еще можно было бы пошаманить с градиентами, но "нарисовать" круг из одного псевдоэлемента на CSS не получится. Так что вам стоит смотреть в сторону SVG и анимирования свойства stroke-dashoffset. Почитать про это можно в статье.
Простой
