Псевдоелементи ::after та ::before

::after створює псевдоелемент після вмісту елемента. Цей псевдоелемент працює лише разом із стильовою властивістю content, що визначає вміст для вставки. Не всі елементи мають власний вміст, тому ::after не дає результату для , та інших елементів.

У прикладі 1 показано використання псевдоелемента :: after для додавання тексту в кінці абзацу.

Приклад 1. Застосування :: after

Результат прикладу показано на рис. 1.

Мал. 1. Додавання тексту до абзацу за допомогою :: after

У цьому прикладі до вмісту абзацу з класом new додається додаткове слово, яке є значенням content .

По дії ::before аналогічний ::after , але вставляє псевдоелемент до вмісту елемента. У прикладі 2 показано додавання маркерів свого типу до пунктів списку за допомогою приховування стандартних маркерів та застосування псевдоелементу :: before.

Приклад 2. Використання ::before

Результат цього прикладу показано на рис. 2.

Мал. 2. Зміна виду маркерів за допомогою :: before

У цьому прикладі псевдоелемент ::before встановлюється для селектора li і визначає маркери списку. Додавання бажаних символів відбувається шляхом завдання значення властивості content.

Блок із цитатою

::before і ::after чудово підходять для оформлення цитат, зокрема виведення збільшених лапок, які показують користувачам, що перед ними цитата (рис. 3).

Мал. 3. Вид цитати з лапками

Для відображення лапки перед текстом ми використовуємо::before, а після тексту -:after. До них додаємо і бажане оформлення лапок, на кшталт зміни кольору і розміру (приклад 3).

Приклад 3. Лапки в цитаті

Хлібні крихти

Хлібні крихти є різновидом навігації по сайту, який показує шлях до поточного документа та його положення в ієрархії сайту (рис. 4).

Мал. 4. Хлібні крихти

Приклад 4. Хлібні крихти

також

content
quotes
relative та absolute
Акордеон меню
Анімація посилань під час наведення
Атрибути посилань
Декоративні заголовки
Додавання тіні
Доступність
Гра з картинками
Використання у верстці
Не лише текст
Очищення float
Докладніше про позиціонування
Псевдоелемент ::after
Псевдоелемент ::before
Псевдоелементи
Робота з лапками
Робота з типографікою
Синтаксис CSS
Спойлер
Текст у HTML
Що таке?

Псевдоелемент: after

Псевдоелемент, який використовується для виведення бажаного тексту після вмісту елемента, до якого він додається. Псевдоелемент: after працює разом із властивістю content.

Для: характерні такі особливості.

При додаванні :after до блокового елемента, значення властивості display може бути лише: block , inline , none , list-item . Всі інші значення будуть трактуватися як block.
При додаванні :after до вбудованого елемента display обмежений значеннями inline і none . Всі інші сприйматимуться як inline.

Синтаксис

Значення

HTML5 CSS2.1 IE Cr Op Sa Fx




after


Історії
Історія про те, як біля їдальні з'явилися загадкові рожеві сліди із шістьма пальцями, і чому це сталося.

У цьому прикладі наприкінці текстового абзацу, позначеного класом new, виводиться певний текст для привернення уваги. Результат прикладу показано на рис. 1.

Мал. 1. Результат використання псевдоелемента: after

Браузери

Opera 9.2 враховує всі прогалини, якби вони були укладені в тег .

Браузер Firefox до версії 2.0 включно нестабільно працює з позиціонованими елементами, а також не застосовує: after до тега.

Firefox до версії 3.5 не допускав застосування до: after властивостей position, float, list-style-type та деяких значень display.

Занурення в псевдоелементи :: before та :: after

Псевдоелементи ::before та ::after - це неймовірні універсальні помічники в наборі інструментів CSS. Їх розуміння допоможе вам створити практичний CSS для вирішення різних ситуацій. Або ви можете піти далі і використовувати їх для створення вражаючих трюків CSS.

У цьому посібнику ми почнемо з азів, пояснимо, що таке псевдоелементи і як їх використовувати, і по ходу занурюватимемося в гостріші теми. Також багато поговоримо про стильову властивість content, оскільки вона дуже пов'язана з нашою темою.

Що таке?
Декоративні заголовки
Робота з лапками
Відображення атрибутів елемента
Гра з картинками
Маркери
Управління макетом
Анімація псевдоелементів
Доступність

Вілл Бойд

Випускник Технологічного інституту Джорджії за спеціальністю "Інформатика". Програміст спеціалізується на фронтенд-розробці.

Працював у компаніях Salesforce, Amazon та Turner Broadcasting. Також працював над проектами для CNN, Target, Costco, Nike, Ironman та The Gates Foundation.

Що таке?
Декоративні заголовки
Робота з лапками
Відображення атрибутів елемента
Гра з картинками
Маркери
Управління макетом
Анімація псевдоелементів
Доступність

Гол. редактор: Влад Мержевич

Про сайт

На сайті знаходяться довідники та навчальні курси з різних веб-технологій, а також посібники з верстки веб-сторінок.

Зв'язки

Розділи сайту

Допомога по сайту

Сайт WebReference.ru використовує VPS від Beget.

Як працює after