:: до / :: після - CSS-хитрощі

::beforeІ ::afterпсевдо-елементи в CSS дозволяє вставляти вміст на сторінку без нього необхідності бути в HTML. Хоча кінцевий результат насправді не в DOM, він відображається на сторінці так, ніби він є, і по суті буде таким:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Єдиними причинами використання одного над іншим є:

Ви хочете, щоб створений вміст стояв перед вмістом елемента, позиційно.
::afterЗміст також «після» в джерелі порядку, тому він помістить на вершині :: раніше , якщо складені один на одного , природно.

Зверніть увагу, що вміст все ще знаходиться всередині елемента, до якого вони застосовані. Здається, іменування начебто може з’явитися, як ви знаєте, до або після елемента, але насправді це до або після іншого вмісту всередині.

Значення вмісту може бути:

Рядок: content: "a string"; - спеціальні символи повинні бути спеціально закодовані як сутність Unicode. Дивіться сторінку гліфів.
Зображення: вміст: url (/path/to/image.jpg.webp); - Зображення вставляється з точними розмірами і не може бути змінено. Оскільки такі речі, як градієнти, насправді є зображеннями, псевдоелемент може бути градієнтом.
Нічого: зміст: “”; - Корисно для чіткого виправлення та вставки зображень як фонових зображень (встановити ширину та висоту та навіть змінити розмір із розміром фону)
Лічильник: content: counter(li); - Дуже корисний для стилізації списків, поки не з’явиться маркер.

Зверніть увагу, що ви не можете вставити HTML (принаймні, це буде відображено як HTML). content: "";

: проти ::

Кожен браузер, що підтримує подвійну двокрапку (: :) Синтаксис CSS3, також підтримує лише синтаксис (:), але IE 8 підтримує лише двокрапку, тому наразі для кращої підтримки браузера рекомендується просто використовувати двокрапку.

:: це новий формат, призначений для розрізнення псевдо вмісту від псевдоселекторів. Якщо вам не потрібна підтримка IE 8, сміливо використовуйте подвійну двокрапку.

Пов’язані

::перша лінія
:: перший лист
Селектори класу псевдо

Підтримка браузера

Маленькі проблеми:

Firefox 3.5 - не допускає абсолютного позиціонування псевдоелементів.
В Opera 9.2 пробіли завжди відображаються в цьому псевдоелементі так, ніби це preтекст.
IE 8 не підтримує z-index на них