Задача: Пин пред заглавие

Добавяне на икона без да променяме HTML

Най-важното в тази задача е да добавим визуален елемент (пин) пред заглавие, без да го записваме в HTML кода. Това се постига изцяло с CSS, така че иконата да се показва автоматично пред всички бъдещи заглавия от същия тип. Така поддържаме чист и семантичен HTML, а визуалните детайли управляваме чрез стилове.

Стъпка по стъпка: как да добавиш пин пред заглавие

1. Използвай съществуващия клас на заглавието (например title-profile), създаден в предишните модули.
2. Създай псевдоелемент пред заглавието чрез ::before.
3. Добави съдържание чрез content – символ, икона или изображение.
4. При нужда използвай position, за да позиционираш прецизно пина спрямо текста.
5. Добави отстояние чрез margin, за да има разстояние между пина и текста.

Използвани CSS техники

• ::before – създава виртуален елемент пред съдържанието на избрания елемент.
• content – задължително свойство за псевдоелементи; определя какво да се визуализира.
• position – позволява по-гъвкаво позициониране на пина (напр. relative или absolute).
• margin – контролира разстоянието между иконата и текста.

Задача

Добави пин пред всички заглавия с класа title-profile, без да променяш HTML файла. Увери се, че при добавяне на ново заглавие със същия клас, пинът се появява автоматично.