Перед селектором
::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