After css что это

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

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

Для ::after характерны следующие особенности.

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

Синтаксис

Значения

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

    after   Истории
 





История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.

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

Результат использования псевдоэлемента ::after

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

Браузеры

Браузер Internet Explorer до версии 10.0 работает только с нотацией :after , описанной в спецификации CSS 2.1.

: : after

Загадочный элемент, которого нет в разметке. Но вот же он, стоит после настоящего элемента!

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 6 апреля 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Когда мы в CSS добавляем : : after к селектору, для соответствующего элемента создаётся псевдоэлемент). Этот псевдоэлемент — его самый последний, он идёт после всего внутреннего содержимого.

Пример

Скопировать ссылку «Пример» Скопировано

 a::after  content: "→";> a::after  content: "→"; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 ::after  /* Для CSS 3 */> :after  /* Для CSS 2 */> ::after  /* Для CSS 3 */ > :after  /* Для CSS 2 */ >

�� В CSS 3 ввели написание с двумя двоеточиями, чтобы отличать запись псевдоэлемента от псевдокласса. Но синтаксис с одним двоеточием также поддерживается современными браузерами.

Как понять

Скопировать ссылку «Как понять» Скопировано

Проще всего воспринимать псевдоэлемент : : after как дополнительный элемент в конце тега. Мы можем применить к нему любые стили.

Чаще всего псевдоэлемент используется для оформительских целей, либо позволяя добавить дополнительное содержимое после текста, либо выступая в роли дополнительного стилизованного блока.

По умолчанию псевдоэлемент : : after является инлайновым.

Самый простой пример использования : : after вместе с : : before — оформление текстового содержимого:

    «Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об ароматах классики  «Все кидаются в лопухи, в крапиву. » «Лето Господне», Иван Шмелев





  article> h1> «Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об span class="accent">ароматахspan> классики h1> p>«Все кидаются в лопухи, в крапиву. »p> p>«Лето Господне», Иван Шмелевp> article>

 .accent::before,.accent::after  content: "��"; vertical-align: middle; font-size: 0.6em;> .accent::before  margin-right: 0.1em;> .accent::after  margin-left: 0.1em;> .accent::before, .accent::after  content: "��"; vertical-align: middle; font-size: 0.6em; > .accent::before  margin-right: 0.1em; > .accent::after  margin-left: 0.1em; >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Не забывайте прописывать свойство content для псевдоэлемента : : after . Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

�� Псевдоэлементы : : before и : : after можно использовать и для более сложной стилизации:

 выбери меня a href="#" class="link">выбери меняa>

 .link  position: relative;> .link::before,.link::after  content: ""; height: 14px; width: 14px; position: absolute; transition: all 0.6s;> .link::before  top: 0; left: 0; border-top: 6px solid #000000; border-left: 6px solid #000000;> .link::after  bottom: 0; right: 0; border-bottom: 6px solid #000000; border-right: 6px solid #000000;> .link:hover::before,.link:hover::after  width: 100%; height: 100%; transition: all 0.3s;> .link  position: relative; > .link::before, .link::after  content: ""; height: 14px; width: 14px; position: absolute; transition: all 0.6s; > .link::before  top: 0; left: 0; border-top: 6px solid #000000; border-left: 6px solid #000000; > .link::after  bottom: 0; right: 0; border-bottom: 6px solid #000000; border-right: 6px solid #000000; > .link:hover::before, .link:hover::after  width: 100%; height: 100%; transition: all 0.3s; >

В этом примере рамки применены к псевдоэлементам : : before и : : after . При этом сами псевдоэлементы используются как два дополнительных стилизуемых элемента внутри ссылки . Круто, правда? В HTML пишем один тег, а по факту можем стилизовать аж три! ��

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

�� Псевдоэлемент : : after можно использовать и для того, чтобы вывести важную информацию во время печати. Например, содержимое ссылок, которые есть на странице:

 Узнать больше про псевдоэлементы в Доке a href="https://doka.guide/css/pseudoelements/">Узнать больше про псевдоэлементы в Докеa>

 @media print  a  text-decoration: none; > a::after  content: " (ссылка: " attr(href) ")"; >> @media print  a  text-decoration: none; > a::after  content: " (ссылка: " attr(href) ")"; > >

Тогда на печати мы получим следующее:

Псевдоэлементы (:before, :after) в CSS

Существует возможность создать HTML элемент с помощью CSS. Это элементы :before и :after. Они называются называются псевдоэлементами и не могут существовать без элемента, к которому они относятся. Другими словами, если удалить тот элемент, к которому они привязаны, то псевдоэлементы тоже будут удалены.

Давайте попробуем посмотреть на практике, как же можно создать эти элементы и для чего они нужны. Приведём простейший пример — это оформление цитаты. Создадим контейнер с текстом и оформим этот блок как цитату. С помощью CSS добавим ему кавычки слева и справа, чуть изменим стиль и фон:

 div < background: #eaf2f5; padding: 30px; >div:before < content: '“'; font-size: 50px; position: relative; top: -30px; left: -20px; float: left; >div:after Тише, мыши, кот на крыше

Получится такой результат:

Тише, мыши, кот на крыше

При создании псевдоэлементов их свойства display совпадает со значением родителя.
Cмотрите другие статьи:
Была ли эта статья полезна? Есть вопрос?
Закажите недорогой хостинг Заказать
всего от 290 руб

Если у Вас появились вопросы по материалам на нашем сайте, то пожалуйста, пришлите нам их на почтовый адрес support@mousedc.ru. Мы обязательно ответим.

Также Вы можете отправить нам свой отзыв на наши услуги, замечание или предложение. Мы ценим наших клиентов и внимательно прислушиваемся ко всем замечаниям!

Последние новости

DDoS атака на регистратора

Генератор паролей
Генератор .htpasswd

Коврик для мыши новым клиентам

Оплатите хостинг на год и получите удобный коврик

Помощь в переносе
с другого хостинга

Хотите переехать? Мы поможем перенести всё

Запишитесь на интенсивные курсы по созданию сайтов.

Приветствуем всех в нашем уютном дата центре! Мы предоставляем качественный и надёжный хостинг. У нас можно заказать домены и VPS, прочитать статьи по созданию сайтов и информационной безопасности. А из наших видео подкастов можно узнать о том, как продвигать и развивать iT-проекты.

Пользовательское соглашение
Политика конфиденциальности
Публичная оферта
Антиспам соглашение

Псевдоэлементы — Основы верстки контента

В прошлых уроках мы разобрали псевдоклассы — изменение существующих элементов в зависимости от их состояния. А возможно ли задать или создать стили для таких элементов, которых нет внутри HTML? Да! И для этого в CSS существует понятие псевдоэлементов.

Разберемся на примере стилизации буквицы. Буквица — увеличенный первый символ в параграфе. Вы часто можете встретить этот прием в книгах со сказками или книгах, стилизованных под старину. Каким способом это можно сделать? Первое, что приходит в голову — обернуть первый символ в отдельный тег и стилизовать именно его.

   class="first-letter">Ж ил старик со своею старухой У самого синего моря; Они жили в ветхой землянке Ровно тридцать лет и три года.

article  color: #37474f; font: 25px/1.5 serif; > .first-letter  color: #f44336; font-size: 2em; line-height: 1; >

Хороший и рабочий вариант, подходящий для точечных изменений в некоторых текстах. Какие проблемы тут могут быть скрыты? Во-первых: если таких текстов много, то добавлять теги к каждому нужному параграфу достаточно долго и риск ошибки возрастает. Можно забыть проставить тег или проставить не на первой букве. Во-вторых, масштабируемость падает. В случае избавления от буквы нужно удалить все классы или удалить стили, но тогда останутся ненужные теги, которые скорее запутают.

Как можно выйти из этой ситуации? Тут в дело и вступают псевдоэлементы. Они могут виртуально создать за нас такой тег и стилизовать его, используя только CSS. Это решает сразу две проблемы, которые были описаны выше:

Нет необходимости проставлять новые теги. Достаточно только указать нужный селектор в CSS.
После удаления такого класса в HTML не останется ненужных тегов.

За стилизацию первого символа отвечает псевдоэлемент ::first-letter . Он виртуально обернет первый символ и применит к нему пользовательские стили. Немного перепишем пример и для всех параграфов внутри article укажем буквицу.

article  color: #37474f; font: 25px/1.5 serif; > article p::first-letter  color: #f44336; font-size: 2em; line-height: 1; >

Результат не изменился, но, с точки зрения работы браузера, произошло много изменений. Браузер автоматически нашел первый символ в параграфе, который находится внутри article. Обернул его и применил стили, описанные в CSS.

Интересно: псевдоэлементы по синтаксису очень похожи на псевдоклассы, но вместо одного символа : используется два. При этом браузеры правильно обработают такой псевдоэлемент :first-letter . При такой записи не сразу очевидно где псевдокласс, а где псевдоэлемент, поэтому всегда используйте :: для указания псевдоэлемента.

Псевдоэлементы before и after

Для этих двух псевдоэлементов можно написать не только урок, но и целый курс. Их взаимодействие с сайтами невозможно переоценить. В большинстве случаев используются ::before и ::after , поэтому они по праву считаются самыми важными псевдоэлементами. В процессе изучения верстки можно придумать различные способы их использования и стилизации.

В уроке про списки было сказано, что стилизация маркеров чаще всего происходит с помощью псевдоэлементов. В этой части рассмотрим, как же это делается.

Важно: здесь будут свойства, которые относятся к позиционированию элементов. Все эти свойства будут изучены в курсе CSS: Позиционирование. Если некоторые части CSS будут непонятны, то не переживайте. В скором времени вы изучите работу всех новых свойств.

::before и ::after позволяют создать новый контент внутри HTML дерева. Этот контент привязан к определенному элементу и может появляться до него или после. Именно поэтому псевдоэлементы называются так:

::before — псевдоэлемент, позволяющий добавить контент перед выбранным элементом.
::after — псевдоэлемент, позволяющий добавить контент после выбранного элемента.

Каждый из этих псевдоэлементов должен включать специальное свойство content , внутри которого и указывается, что должно быть внутри. Без этого свойства псевдоэлементы ::before и ::after работать не будут.

Создадим блочный элемент и воспользуемся новыми псевдоэлементами.

 class="square bg-black text-white"> Контент внутри блока

.square::before  content: "Текст до контента внутри блока"; > .square::after  content: "Текст после контента внутри блока"; >

Весь контент внутри псевдоэлементов ::before и ::after является строчным. То есть имеет свойство display: inline по умолчанию. Вы легко можете изменять это и работать с псевдоэлементами так, как если бы это были обычные элементы внутри HTML документа.

Это открывает поистине безграничные возможности стилизации элементов с помощью CSS. Много техник построено на использовании псевдоэлементов. Создадим пользовательские маркеры списка, используя изображение.

 Обучение на Хекслете  class="hexlet-ul"> Большое количество теории Множество практик и дополнительных заданий Комплексные проекты для закрепления знаний

.hexlet-ul  list-style: none; > .hexlet-ul li  position: relative; margin-bottom: 20px; > .hexlet-ul li::before  position: absolute; left: -30px; width: 20px; height: 20px; background-image: url("https://assets.codepen.io/1425525/hexlet_logo.png"); background-repeat: no-repeat; background-size: cover; content: ""; >

Разберем, что происходит в псевдоэлементе .hexlet-ul li::before :

.hexlet-ul li::before  width: 20px; height: 20px; content: ""; >

В этой части CSS кода указывается пустой content . Так как мы хотим добавить только изображение, то никакие символы нам не нужны. Данное поле можно оставить пустым, но добавлять его обязательно. Для элемента задаются определенные рамки высоты и ширины. Именно в эти рамки мы и будем вписывать изображение.

.hexlet-ul li::before  background-image: url("https://assets.codepen.io/1425525/hexlet_logo.png"); background-repeat: no-repeat; background-size: cover; >

Устанавливаем изображение для блока. Для этого мы используем три свойства:

background-image — свойство, позволяющее установить изображение в качестве фона. Внутри используем функцию url для указания адреса, по которому расположено изображение.
background-repeat — повтор изображения. Нужно ли повторять изображение, если это возможно? В данном случае нет, так как нам нужно конкретное изображение, а не повторяющийся фон. Значение no-repeat запрещает повторять изображение.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях: