Псевдо елементи

Най-важното за псевдо-елементите

Псевдо-елементите позволяват да добавяме съдържание в страницата без да го пишем в HTML-а. Те се държат като реални елементи и могат да бъдат стилувани с CSS. Най-често използваните са ::before и ::after, които добавят съдържание съответно преди и след даден елемент. Ако трябва да запомните едно нещо – псевдо-елементите са чист и гъвкав начин да добавяте повтарящ се текст или декоративни елементи само чрез CSS.

Стъпка по стъпка: добавяне на текст с ::before и ::after

1. Изберете елемент, например h2.
2. Създайте псевдо-елемент ::before към него.
3. Задайте свойството content със стойност текст (например "Title").
4. Добавете стилове – цвят, шрифт и други.
5. По желание заменете ::before с ::after, за да се визуализира текстът след съдържанието.

Така всеки h2 автоматично ще получава допълнително описание, без да се налага да добавяте допълнителен span в HTML-а.

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

• ::before – добавя съдържание преди елемента; изисква content.
• ::after – добавя съдържание след елемента; също изисква content.
• content – дефинира какъв текст или стойност ще се визуализира в псевдо-елемента.
• color – задава цвят на текста.
• font-family – определя шрифта на текста.

Задача

Добавете ::before към всички h2 елементи в страницата и ги маркирайте с текст „Section“. След това го стилизирайте с различен цвят и шрифт, така че ясно да се отличава от основното заглавие.