Перед селектором
::before
Селектор CSS можна використовувати для вставки вмісту перед вмістом вибраного елемента або елементів. Він використовується, прикріплюючись ::before
до елемента, на якому він повинен бути використаний.
Давайте розглянемо кілька прикладів:
p::before { content: "* "; } span.comment::before { content: "Comment: "; color: blue; }
To infinity, and beyond!
I am Buzz Lightyear. I come in peace.
May the force be with you.
Do. Or do not. There is no try.
У наведеному вище прикладі ми додаємо зірочку та пробіл перед кожним елементом абзацу на сторінці. Крім того, перед кожним span
елементом класу ми додаємо синій колір "Коментар:" comment
.

Після селектора
::after
Селектор CSS можна використовувати для вставки вмісту після вмісту вибраного елемента або елементів. Він використовується шляхом прикріплення ::after
до елемента, на якому він повинен бути використаний.
Ось кілька прикладів:
.buzz::after { content: " - Buzz Lightyear"; color: blue; } .yoda::after { content: " - Yoda"; color: green; }
To infinity, and beyond!
Do. Or do not. There is no try.
У наведеному вище прикладі ми додаємо "- Buzz Lightyear" синім кольором до елемента з класом buzz
. Крім того, ми додаємо "- Yoda" зеленим кольором до елемента з класом yoda
.

Однокрапка проти двокрапки
Існує трохи дискусій щодо правильного способу використання псевдоелементів - старого стилю з двокрапкою ( :before
), що використовується в специфікаціях CSS 1 і 2, проти рекомендацій CSS3, двокрапки ( ::before
), головним чином для “встановлення дискримінації між псевдокласи та псевдоелементи ” .
Але з міркувань сумісності метод із двокрапкою все ще прийнятий. Майте на увазі, що IE8 підтримує лише позначення з двома двокрапками.
Більше інформації:
- Посібник з CSS: зручний посібник із CSS для розробників
- Найкращі приклади CSS та приклади CSS3