Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов
Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.
Чтобы применить на практике методы из статьи, нужно:
- Базовое понимание HTML.
- Базовое понимание CSS.
- Редактор кода и браузер.
Что такое псевдоэлементы
Псевдоэлементы — это селекторы CSS , которые используют для вставки содержимого, которого нет в исходном коде, их используют для стилизации определённой части выбранного элемента. Начинаются они с двойного двоеточия: ::before , ::after , ::placeholder , ::first-letter . В этой статье речь пойдёт только про использование ::before и ::after .
Псевдоэлемент ::before вставляет содержимое перед элементом.
h1::before
Псевдоэлемент ::after вставляет содержимое после элемента.
h1::after
В чём разница между псевдоэлементом и псевдоклассом?
Псевдоэлементы и псевдоклассы иногда путают, потому что звучат они похоже, хотя по факту — совершенно разные явления.
Псевдоэлементы добавляют содержимое. В отличие от них, псевдоклассы — это селекторы, которые выбирают элементы, находящиеся в определённом состоянии. Пример — псевдокласс :hover , который позволяет применить правила CSS к элементу только при наведении курсора на элемент.
Синтаксически псевдокласс начинается с двоеточия, а псевдоэлемент — с двойного двоеточия.
Как создать анимацию при помощи псевдоэлементов
Скорее всего, вы уже знакомы со многими свойствами CSS. На всякий случай здесь мы сначала рассмотрим некоторые из них.
- transform
- translate
- rotate
- scale
- skew
Если вы и так знаете о них достаточно, переходите сразу к инструкции.
Transform и Transition
В этом проекте мы используем свойства transform и transition , так что нужно понимать, что они делают и для чего нужны.
Transform изначально позволяет двигать, поворачивать, масштабировать и наклонять элемент.
.box-1 < transform: translate(100px, 100px); >.box-2 < transform: rotate(60deg); >.box-3 < transform: scale(2); >.box-4
Свойство transition устанавливает продолжительность изменений, чтобы анимация была плавной.
Позиционирование с помощью relative и absolute
Существует несколько свойство CSS, которые помогают контролировать поток документа и положение элемента в документе. В этой статье нам будут интересны только relative и absolute .
Значение relative
Relative позволяет контролировать позицию элемента относительно себя в потоке документа. Например, можно перемещать объект, используя его изначальное положение в качестве точки отсчёта:
.box-2
Как видите, второй бокс сдвигается вправо на 150 пикселей от изначального положения, но это не влияет на поток документа, поскольку пространство, заданное в макете, не меняется.
Значение absolute
Когда мы задаём элементу значение absolute, CSS удаляет элемент из обычного потока документа, перекрывая другие элементы. Элемент со значением absolute располагается относительно блока со значением позиционирования relative — родительского контейнера.
Когда такого блока рядом нет, в качестве точки отсчёта используется тело документа.
.parent-container < position: relative; >.box-1 < position: absolute; left: 20px; top: 20px; >.box-2
Контроль Controlling the stacking order of elements using z-index
Свойство z-index позволяет накладывать элементы один на другой и менять порядок наложения. Если элемент находится выше по порядку наложения, он появится раньше элемента с низким значением:
.box-1 < z-index: 1; >.box-2 < z-index: 2; >.box-3 < z-index: 3; >.box-4
Z-index работает только с элементами, которые были позиционированы с помощью свойства position . Если у двух элементов одинаковый z-index , сверху будет тот, который стоит последним в разметке HTML.
Создаём анимацию с помощью псевдоэлементов
Начнём первый проект с создания простой анимированной кнопки, чтобы понять, как использовать псевдоэлементы для анимации.
Создаём тег привязки, который позже применим к кнопке.
Переходим к файлу CSS и стилизуем ссылку, чтобы она выглядела, как кнопка.
Код должен готовить сам за себя — убрали дефолтное подчёркивание, добавили двухпиксельную рамку и перекрасили кнопку в цвет текста. Ещё добавили отступы, чтобы отделить текст от рамки, и скруглили края кнопки при помощи радиуса границы. Добавили длительность перехода — 1 секунду. То есть любое изменение кнопки будет длиться в течение секунда, плавно. Наконец, установили значение relative , потому что внутри кнопки расположим псевдоэлемент. Кнопка станет родительским контейнером, относительно которого будет меняться положение элемента со значением absolute . Вот что получится:
Пора создать в кнопке псевдоэлемент.
.btn::before
Мы создали псевдоэлемент с пустым свойством content , то есть внутри ничего нет. Позиционирование у него со значением absolute , что удаляет элемент из обычного потока документов так, что он перекрывает кнопку, и устанавливает координаты top и left равными нулю. Так пустой псевдоэлемент прикрепляется к кнопке именно в этих местах.
После устанавливаем ширину и высоту пустого элемента равными 100 % родительского элемента — кнопки.
В итоге мы перекрасили фон псевдоэлемента в цвет кнопки и ещё раз добавили секундный переход. Вот что получится:
Как видим, псевдоэлемент перекрывает кнопку — из-за значения absolute свойства position .
Решим эту задачу, используя z-index , чтобы изменить контекст наложения. Расположим псевдоэлемент за кнопкой при помощи отрицательного значения z-index . Затем используем translate , чтобы передвинуть псевдоэлемент влево на -100%.
.btn::before < /*. previous code */ z-index: -1; transform: translateX(-100%); >Вот что получается:
Теперь анимируем псевдоэлемент, чтобы он возвращался в исходное положение, когда пользователь наводит курсор на кнопку. Используем псевдокласс :hover .
.btn:hover::before
По сути, когда на кнопку наводят курсор, псевдоэлемент возвращается к позиции absolute . Вот результат:
.btn:hover
Поскольку мы добавили translate к самой кнопке, изменения пройдут плавно.
Последний шаг: применим overflow: hidden к кнопке, чтобы скрыть любой элемент, выходящий за пределы контейнера. Свойство скроет псевдоэлемент, мы увидим его, когда он вернётся в начальную позицию.
Итак, мы создали анимированную кнопку с помощью псевдоэлемента. Полный код тут.
Создаём продвинутую анимацию для профиля с помощью множества псевдоэлементов
Теперь усложним задачу и сделаем более сложную анимированную карточку профиля, используя уже четыре псевдоэлемента. Сделаем интересный эффект при наведении курсора. Вот что будет в разметке.
John Doe
Ceo / Founder
Мы создали простую карточку div с данными пользователя: именем и должностью.
Переходим к CSS и изменяем стиль карточки.
.profile-card < width: 300px; height: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: grid; place-items: center; position: relative; background: url("/image.jpg") no-repeat center center/cover; >Мы создали карточку с фиксированной шириной и высотой, поместили содержимое внутрь и расположили его по центру с помощью CSS Grid. Добавили тень по краям, чтобы всё выглядело реалистичнее. Потом установили карточке значение relative , чтобы превратить её в родительский контейнер для псевдоэлементов. В конце добавили по центру фоновую картинку.
Переходим к созданию псевдоэлементов. Это непросто. Нужно использовать четыре псевдоэлемента, но у элемента может быть только один псевдоэлемент ::before и один псевдоэлемент ::after . Чтобы обойти это ограничение, используем саму карточку, чтобы сделать два псевдоэлемента, а потом блок info div внутри карточки, чтобы сделать ещё два. Начнём с info div .
.info::before
Поскольку у блока info div нет фиксированной ширины и высоты, псевдоэлемент принимает ширину и высоту родительской карточки.
Затем мы наклоняем его на 30 градусов и сдвигаем на 100%. Блок сдвигается вправо. Отрицательный индекс гарантирует, что он останется за текстом. Делаем блок полупрозрачным.
Переходим к следующему псевдоэлементу:
.info::after
Сделали примерно то же, что и раньше, только изменили направление наклона на противоположное и добавили тень блока, чтобы имитировать 3D.
Теперь сделаем так, чтобы при наведении курсора на карточку псевдоэлементы двигались внутрь карточки. Добавим transition для плавной анимации.
.profile-card:hover .info::before < transform: skew(30deg) translateX(50%); >.profile-card:hover .info::after
Вот что получится:
Теперь делаем псевдоэлементы для самой карточки.
.profile-card::before
Всё уже понятно из кода. Повторяем всё то же, что уже делали, просто передвигаем псевдоэлемент ::before вправо на 85 процентов. Затем создаём последний псевдоэлемент и наклоняем его в другую сторону.
.profile-card::after
Как вы уже догадались, при наведении курсора псевдоэлементы сдвигаются внутрь. Но в этот раз траектория будет больше.
.profile-card:hover:before < transform: skew(30deg) translateX(30%); >.profile-card:hover:after
Карточка почти готова. Установим свойство overflow как hidden , чтобы спрятать всё, что выходит за края.
.profile-card < /*. previous code. */ overflow: hidden; >Меняем цвет текста на белый и делаем его прозрачным. Когда курсор на карточке, прозрачность убираем, чтобы текст стал видимым.
.info h2, .info p < color: #fff; opacity: 0; transition: all 0.6s; >.profile-card:hover .info h2, .profile-card:hover .info p
Пока всё. Как видим, псевдоэлементы ::before и ::after помогают разработать анимацию.
Псевдоэлемент :before
Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.
Для :before характерны следующие особенности.
- При добавлении :before к блочному элементу, значение свойства display может быть только: block , inline , none , list-item . Все остальные значения будут трактоваться как block .
- При добавлении :before к встроенному элементу, display ограничен значениями inline и none . Все остальные будут восприниматься как inline .
- :before наследует стиль от элемента, к которому он добавляется.
Синтаксис
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента :before выводится символ ¶. Результат примера продемонстрирован на рис. 1.
Рис. 1. Использование псевдоэлемента :before в списках
Браузеры
Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег .
Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :before к тегу .
Firefox до версии 3.5 не допускает применение к :before свойств position , float , list-style-type и некоторых значений display .
Псевдоэлемент ::before
Псевдоэлемент ::before применяется для отображения контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.
По умолчанию ::before создаёт строчный элемент.
Синтаксис
Селектор::before
Описание Пример Указывает тип значения. A && B Значения должны выводиться в указанном порядке. && A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count [ ] Группирует значения. [ crop || cross ] * Повторять ноль или больше раз. [,]* + Повторять один или больше раз. + ? Указанный тип, слово или группа не является обязательным. inset? Повторять не менее A, но не более B раз. # Повторять один или больше раз через запятую. # Пример
В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента ::before выводится символ ¶. Результат примера продемонстрирован на рис. 1.
Рис. 1. Использование псевдоэлемента ::before в списках
Примечание
В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов. В CSS2 они обозначаются одним двоеточием. Браузеры, как правило, понимают оба синтаксиса.
Спецификация
Спецификация Статус CSS Transitions Рабочий проект CSS Animations Рабочий проект Selectors Level 3 Рекомендация CSS Level 2 (Revision 1) Рекомендация Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
:before 8 12 1 4 4 1 ::before 9 12 5 7 4 1.5 :before 1 1 4 1 ::before 1 1 7 1 В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- content
- relative и absolute
- Декоративные заголовки
- Добавление текста к шкале
- Добавление тени
- Использование в вёрстке
- Комплексные селекторы
- Не только текст
- Подробнее о позиционировании
- Псевдоэлемент ::after
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Спойлер
- Что это такое?
Рецепты
- Как изменить вид маркера списка?
- Как изменить стиль чисел в списке?
- Как изменить цвет маркеров в списке?
- Как размыть фоновую картинку?
- Как сделать нумерацию русскими буквами?
Практика
- Символ в качестве маркера
- Цвет маркеров
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :buffering
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :link
- :muted
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :paused
- :placeholder-shown
- :playing
- :read-only
- :read-write
- :required
- :root
- :seeking
- :stalled
- :target
- :valid
- :visited
- :volume-locked
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- gap
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- row-gap
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
Псевдоэлементы — Основы верстки контента
В прошлых уроках мы разобрали псевдоклассы — изменение существующих элементов в зависимости от их состояния. А возможно ли задать или создать стили для таких элементов, которых нет внутри 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 студентов
Наши выпускники работают в компаниях: