Before after css что это

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

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

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

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

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

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

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

1. Нет необходимости проставлять новые теги. Достаточно только указать нужный селектор в CSS.
2. После удаления такого класса в 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; > 

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

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

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

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

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

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

::after (:after)

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

/* Добавить стрелки после ссылок */ a::after  content: "→"; > 

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

Синтаксис

Error: could not find syntax for this item

Примечание: В CSS3 появилась запись ::after (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :after , введённую в CSS2.

Примеры

Простое использование

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

HTML

p class="boring-text">Вот простой скучный текст.p> p>Вот нормальный текст, который не является ни скучным, ни потрясающим.p> p class="exciting-text"> Помогать MDN легко и весело. Просто нажмите кнопку редактирования, чтобы добавить новые живые примеры, или улучшить существующие примеры. p> 

CSS

.exciting-text::after  content: "; color: green; > .boring-text::after  content: "; color: red; > 

Результат

Пример оформления

Можно стилизовать текст или изображения в свойстве content практически любым способом.

HTML

span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.span> 

CSS

.ribbon  background-color: #5bc8f7; > .ribbon::after  content: "Посмотрите на этот оранжевый прямоугольник."; background-color: #ffba10; border-color: black; border-style: dotted; > 

Результат

Подсказки

Следующий пример показывает использование псевдоэлемента ::after в сочетании с CSS-выражением attr() и пользовательского data-* атрибута data-descr для создания подсказки на чистом CSS.

HTML

p> Здесь находится живой пример вышеприведённого кода.br /> У нас есть некоторый span data-descr="коллекция слов и знаков препинаний">текстspan> здесь с несколькими span data-descr="маленькие всплывающие окошки, которые снова исчезают" >подсказкамиspan >.br /> Не стесняйтесь, наводите мышку чтобы span data-descr="не понимать буквально">взглянутьspan>. p> 

CSS

span[data-descr]  position: relative; text-decoration: underline; color: #00f; cursor: help; > span[data-descr]:hover::after  content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; > 

Результат

Спецификации

Specification
CSS Pseudo-Elements Module Level 4 # generated-content

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

: : 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) ")"; > >    Скопировать Скопировано Не удалось скопировать   

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

Крутое использование псевдоэлементов CSS ::before и ::after

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

Вы никогда не окажетесь в одиночестве — потому что везде, где был один, теперь будут трое

Что такое псевдо-элементы?

Если вы никогда раньше не сталкивались с ::before и ::after, вы можете спросить: «Что это за псевдо-элемент, о котором вы говорите?»

Вот 30-секундный обзор: Псевдоэлементы являются «воображаемыми» элементами, которые можно вставить в документ с помощью CSS. Например, если бы я написал очень простой CSS:

content : «Hello!» ;

Внезапно перед каждым p контента страницы будет вставлено слово «Hello». Псевдо-элемент ::after похож на него, но размещается после контента.

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

Тем не менее, я хочу выделить одну распространенную ошибку, потому что я так много раз ее совершал. Многие из применений, которые мы будем исследовать, включают в себя графику, но не содержат реального содержимого из слов. Это замечательно, но вы должны установить и свойство content, и, если ваш контент пуст, свойство display — или псевдо-элемент не будет отображаться. Я наступал на эти грабли много раз… поэтому никогда не забывайте начинать с настройки контента. Если ваше использование полностью визуально, просто установите:

display : inline-block ;

Простое использование ::before и ::after

Давайте начнем с некоторых простых способов использования ::before и ::after.

Пользовательские иконки

Одним простым и распространенным, но очень полезным использованием для ::before является добавление иконок к элементам определенного класса. Например, FontAwesome использует эту технику для реализации своих иконок. Вы можете использовать тот же подход, чтобы сделать свои собственные иконки.

FontAwesome делает это с помощью собственного шрифта и свойства content, которое предоставляет преимущество автоматического изменения размера в зависимости от элемента, для которого оно задано. Если мы хотим использовать изображение, нам нужно явно указать его размер, иначе псевдоэлемент будет иметь размер 0 и не будет виден.

Например, если бы я хотел, чтобы каждый элемент на странице с классом .kball отображал круг размером 30×30 с изображением моего профиля, я мог бы сделать что-то вроде этого:

Цитаты

Еще одно полезное использование ::before и ::after заключается в добавлении кавычек вокруг цитаты. Например, мы могли бы создать класс «quote», который применяет двойные кавычки до и после, и даже класс атрибуции, который добавляет в начале тире:

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

Продвинутое использование before и after

Создание фигур

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

По сути, каждый элемент является прямоугольником … и затем с помощью продвинутого использования border-radius и border вы можете либо округлить этот прямоугольник в овал или круг, либо наклонить углы и создать из него треугольник. Конечно, вы можете повернуть его, но это и все…

Но теперь с ::before и ::after у вас есть в 3 раза больше «блоков» для экспериментов. Каждый из них может быть отдельно преобразован, расположен и повернут. Это приводит к феноменальному выбору фигур, которые вы можете создать с помощью чистого CSS.

Крис Койер из CSS Tricks собрал здесь большую коллекцию возможных фигур, из которых я воспроизвел свои любимые, используя цветовую схему ZenDev.com. Верите или нет, это всего лишь 1 элемент HTML!

Отображение значений атрибутов

Еще одно очень крутое использование псевдо-элементов ::before или ::after — это отображение содержимого атрибута.
Вы можете сделать это, включив в content — attr([attributename]).

Например, если вы используете виджет на основе JavaScript, который хранит какое-то значение в качестве атрибута, вы можете автоматически отобразить этот атрибут без необходимости использовать какой-либо JavaScript для его просмотра!

Одно из мест, где я использовал это раньше — это слайдер ZURB Foundation. Слайдер работает, изменяя значение в скрытом поле ввода… но что, если мы хотим сделать текущее значение видимым в самом слайдере? Элемент управления, которым мы манипулируем — это просто span… но он получает атрибут aria для текущего значения aria-valuenow. Ссылаясь на него в псевдо-элементе с помощью content: attr(aria-valuenow), мы можем отобразить его прямо на элементе управления.

Многоступенчатая анимация

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

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

Завершение

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

Редакция: Команда webformyself.