Решение: Пин пред заглавие

Q: Защо правим това остиляване:

Браузърът може всичко. Горният запис може да бъде заменен с width: 18px; height: 18px; background-color: #00aaff; и ефектът ще е същият. Въпрос само на избор и това как е еволюирал кодът докато е бил писан. Няма правилен или грешен начин.

Q: Защо пин-четата станаха 2?

Колега Попзлатев, Вие имате два h2 тага на редове 15 и 16 в html файла: Profile и Contacts. Пинчето се отнася за всички h2 тагове в html файла и тъй като при Вас са два, затова имате и две пинчета.

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

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

Q: Как се появяват кръгчето и триъгълничето?

Всъщност има цял урок за псевдо елементите тук: aula.bg/html-css-psevdo-elementi.

Q: Защо ромбчето и кръгчето са позиционирани с почти еднакви мерни единици в левият край?

Изгледай урока за позициониране и си припомни разликата между position: absolute; и position: relative;

Q: Какво е практическото приложение на фигурки като тази?

Точно така. Идеята е с помощта на примерния проект да демонстрираме максимално възможностите на HTM и CSS. Пинчето е просто пример за това как може да се създават сложни елементи без нуждата от картинки.