Css position after element

::after

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Try it

Note: The pseudo-elements generated by ::before and ::after are contained by the element’s formatting box, and thus don’t apply to replaced elements such as , or to elements.

Syntax

Note: CSS introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements. For backward compatibility, browsers also accept :after , introduced earlier.

Examples

Simple usage

Let’s create two classes: one for boring paragraphs and one for exciting ones. We can use these classes to add pseudo-elements to the end of paragraphs.

HTML

p class="boring-text">Here is some plain old boring text.p> p>Here is some normal text that is neither boring nor exciting.p> p class="exciting-text">Contributing to MDN is easy and fun.p> 

CSS

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

Result

Decorative example

We can style text or images in the content property almost any way we want.

HTML

span class="ribbon">Look at the orange box after this text. span> 

CSS

.ribbon  background-color: #5bc8f7; > .ribbon::after  content: "This is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted; > 

Result

Tooltips

This example uses ::after , in conjunction with the attr() CSS expression and a data-descr custom data attribute, to create tooltips. No JavaScript is required!

We can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard focusable, and using a CSS :focus selector. This shows how flexible ::before and ::after can be, though for the most accessible experience a semantic disclosure widget created in some other way (such as with details and summary elements) is likely to be more appropriate.

HTML

p> Here we have some span tabindex="0" data-descr="collection of words and punctuation"> text span> with a few span tabindex="0" data-descr="small popups that appear when hovering"> tooltipsspan >. p> 

CSS

span[data-descr]  position: relative; text-decoration: underline; color: #00f; cursor: help; > span[data-descr]:hover::after, span[data-descr]:focus::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; > 

Result

Accessibility concerns

Using an ::after pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

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

Источник

Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.

Чтобы применить на практике методы из статьи, нужно:

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

Псевдоэлементы — это селекторы CSS , которые используют для вставки содержимого, которого нет в исходном коде, их используют для стилизации определённой части выбранного элемента. Начинаются они с двойного двоеточия: ::before , ::after , ::placeholder , ::first-letter . В этой статье речь пойдёт только про использование ::before и ::after .

Псевдоэлемент ::before вставляет содержимое перед элементом.

Псевдоэлемент ::after вставляет содержимое после элемента.

В чём разница между псевдоэлементом и псевдоклассом?

Псевдоэлементы и псевдоклассы иногда путают, потому что звучат они похоже, хотя по факту — совершенно разные явления.

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

Синтаксически псевдокласс начинается с двоеточия, а псевдоэлемент — с двойного двоеточия.

Как создать анимацию при помощи псевдоэлементов

Скорее всего, вы уже знакомы со многими свойствами CSS. На всякий случай здесь мы сначала рассмотрим некоторые из них.

Если вы и так знаете о них достаточно, переходите сразу к инструкции.

Transform и Transition

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

Transform изначально позволяет двигать, поворачивать, масштабировать и наклонять элемент.

Свойство transition устанавливает продолжительность изменений, чтобы анимация была плавной.

Позиционирование с помощью relative и absolute

Существует несколько свойство CSS, которые помогают контролировать поток документа и положение элемента в документе. В этой статье нам будут интересны только relative и absolute .

Значение relative

Relative позволяет контролировать позицию элемента относительно себя в потоке документа. Например, можно перемещать объект, используя его изначальное положение в качестве точки отсчёта:

Как видите, второй бокс сдвигается вправо на 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 позволяет накладывать элементы один на другой и менять порядок наложения. Если элемент находится выше по порядку наложения, он появится раньше элемента с низким значением:

Z-index работает только с элементами, которые были позиционированы с помощью свойства position . Если у двух элементов одинаковый z-index , сверху будет тот, который стоит последним в разметке HTML.

Создаём анимацию с помощью псевдоэлементов

Начнём первый проект с создания простой анимированной кнопки, чтобы понять, как использовать псевдоэлементы для анимации.

Создаём тег привязки, который позже применим к кнопке.

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

Код должен готовить сам за себя — убрали дефолтное подчёркивание, добавили двухпиксельную рамку и перекрасили кнопку в цвет текста. Ещё добавили отступы, чтобы отделить текст от рамки, и скруглили края кнопки при помощи радиуса границы. Добавили длительность перехода — 1 секунду. То есть любое изменение кнопки будет длиться в течение секунда, плавно. Наконец, установили значение relative , потому что внутри кнопки расположим псевдоэлемент. Кнопка станет родительским контейнером, относительно которого будет меняться положение элемента со значением absolute . Вот что получится:

Пора создать в кнопке псевдоэлемент.

Мы создали псевдоэлемент с пустым свойством content , то есть внутри ничего нет. Позиционирование у него со значением absolute , что удаляет элемент из обычного потока документов так, что он перекрывает кнопку, и устанавливает координаты top и left равными нулю. Так пустой псевдоэлемент прикрепляется к кнопке именно в этих местах.

После устанавливаем ширину и высоту пустого элемента равными 100 % родительского элемента — кнопки.

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

Как видим, псевдоэлемент перекрывает кнопку — из-за значения absolute свойства position .

Решим эту задачу, используя z-index , чтобы изменить контекст наложения. Расположим псевдоэлемент за кнопкой при помощи отрицательного значения z-index . Затем используем translate , чтобы передвинуть псевдоэлемент влево на -100%.

Теперь анимируем псевдоэлемент, чтобы он возвращался в исходное положение, когда пользователь наводит курсор на кнопку. Используем псевдокласс :hover .

По сути, когда на кнопку наводят курсор, псевдоэлемент возвращается к позиции absolute . Вот результат:

Поскольку мы добавили translate к самой кнопке, изменения пройдут плавно.

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

Итак, мы создали анимированную кнопку с помощью псевдоэлемента. Полный код тут.

Создаём продвинутую анимацию для профиля с помощью множества псевдоэлементов

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

Мы создали простую карточку div с данными пользователя: именем и должностью.

Переходим к CSS и изменяем стиль карточки.

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

Переходим к созданию псевдоэлементов. Это непросто. Нужно использовать четыре псевдоэлемента, но у элемента может быть только один псевдоэлемент ::before и один псевдоэлемент ::after . Чтобы обойти это ограничение, используем саму карточку, чтобы сделать два псевдоэлемента, а потом блок info div внутри карточки, чтобы сделать ещё два. Начнём с info div .

Поскольку у блока info div нет фиксированной ширины и высоты, псевдоэлемент принимает ширину и высоту родительской карточки.

Затем мы наклоняем его на 30 градусов и сдвигаем на 100%. Блок сдвигается вправо. Отрицательный индекс гарантирует, что он останется за текстом. Делаем блок полупрозрачным.

Переходим к следующему псевдоэлементу:

Сделали примерно то же, что и раньше, только изменили направление наклона на противоположное и добавили тень блока, чтобы имитировать 3D.

Теперь сделаем так, чтобы при наведении курсора на карточку псевдоэлементы двигались внутрь карточки. Добавим transition для плавной анимации.

.profile-card:hover .info::before < transform: skew(30deg) translateX(50%); >.profile-card:hover .info::after

Теперь делаем псевдоэлементы для самой карточки.

Всё уже понятно из кода. Повторяем всё то же, что уже делали, просто передвигаем псевдоэлемент ::before вправо на 85 процентов. Затем создаём последний псевдоэлемент и наклоняем его в другую сторону.

Как вы уже догадались, при наведении курсора псевдоэлементы сдвигаются внутрь. Но в этот раз траектория будет больше.

.profile-card:hover:before < transform: skew(30deg) translateX(30%); >.profile-card:hover:after

Карточка почти готова. Установим свойство 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 помогают разработать анимацию.

Источник