Псевдоелементи CSS - пояснення до та після селекторів

Перед селектором

::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