Защо кръгчето е after, а триъгълничето е before?

before и after са псевдо елементи и имената им показват къде се намират спрямо елемента, който им е родител. Съответно ако ги позиционираме един върху друг, after ще покрие before. Това е и смисълът кръгчето да е after, а триъгълничето да е before (то искаме да се подпъхне под кръгчето и да не закрива иконката). Разбира се можем със z-index да им сменим местата, но за краткост просто избираме този елемент, който знаем, че ще се нарисува отгоре, за да го остилим като кръгче.

Сега разбрах. Благодаря за разяснението!