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

Как се създава пинче пред заглавие само с CSS

Пинчето пред заглавието може да бъде изградено изцяло с CSS, без изображения. То се създава чрез два псевдо-елемента – единият оформя кръгчето, а другият заострената част. Ключът е комбинацията от position: relative на заглавието и position: absolute на псевдо-елементите, за да се позиционират точно спрямо него.

Стъпка по стъпка: създаване на пин пред H2

1. Добавете position: relative на h2, за да стане отправна точка за абсолютно позициониране.
2. Задайте ляво отстояние (напр. margin-left: 50px), за да освободите място за пинчето.
3. Създайте ::after псевдо-елемент за кръгчето:
   
   • празно съдържание (content: "")
   • фиксирани width и height
   • border-radius, за да стане кръг
   • position: absolute
4. Създайте ::before псевдо-елемент за стрелката:
   
   • квадратен елемент
   • transform: rotate(45deg)
   • допълнително scale по хоризонтала за ромбовидна форма
   • позициониране така, че да се „подпъхне“ под кръгчето
5. Добавете box-shadow към двата елемента, за да се отделят визуално от фона или текста.

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

• ::before / ::after – създаване на декоративни елементи без допълнителен HTML
• position: relative – отправна точка за абсолютно позиционирани деца
• position: absolute – прецизно позициониране спрямо родителя
• transform: rotate() – завъртане на елемент (45° за ромб)
• box-shadow – визуално отделяне от фона или текста

Този подход показва силата на CSS трансформациите и псевдо-елементите за създаване на графични ефекти без изображения.