Псевдоэлемент ::after (:after)- для чего/использование/примеры
В CSS, ::after создаёт псевдоэлемент, который добавляет содержание в конец содержания тега с помощью content.
Подробно о after в css и html.
Синтаксис after
Начнем с синтаксиса "after" в css :
селектор:after {
content: "
}
Разбираем синтаксис after
Выше вы увидели синтаксис "after"... давайте разберем немного ...
селектор - это может быть(например) - класс, id и др селекторы
after - создает псевдоэлемент(как было сказано выше)...
content - двоеточие...одинарные/либо двойные кавычки, внутри кавычек содержание/контент...
Где/зачем используется after
After используется для добавления контента после содержания селектора.
Смотри примеры использования "after" css.
Пример использования after в css/html
Надеюсь, что с синтаксисом "after" вы разобрались... если нет, то ничего страшного не произошло! Разберем использования "after" на примерах и тогда всё станет ясно!Для того, чтобы создать пример с использованием after вам понадобится:
Нам нужен элемент html, пусть это будет div.
Добавим ему class с произвольным значением = "example"
Пропишем стили к данному классу и используем "after".
В "content" поместим произвольное содержание... и покрасим его в
<style>
.example:after {
content: ' <- Пример использования after в css';
color: red;
}
</style>
Соберем весь код:
Код примера использования "after" в css/html
html
<div class=example>Тут текст</div>
css
<style>
.example:after {
content: ' <- Пример использования after в css';
color: red;
}
</style>
Пример использования "after" в css/html
Возьмем выше приведенный код примера использования "after" в css/html и выведем его прямо здесь:Добавляем картинку с помощью after
Второй по популярности поисковый запрос после "after"... "добавить картинку с помощью after"!Чтобы "добавить картинку с помощью after" вам понадобится:
Опять div.
Опять class:
Добавим стили, в background положим ссылку на картинку
.after_img:after {
content: '';
background: url(https://dwweb.ru/__img/__dates/logo.png)center/cover no-repeat;
width: 100%;
height: 200px;
display: block;
}
</style>
Соберем весь код:
Код добавления картинки с помощью after
соберем весь код "добавления картинки с помощью after"
html
<div class=after_img>Тут текст</div>
Css
<style>
.after_img:after {
content: '';
background: url(https://dwweb.ru/__img/__dates/logo.png)center/cover no-repeat;
width: 100%;
height: 200px;
display: block;
}
</style>
Пример добавления картинки с помощью after
Разместим выше приведенный "Код добавления картинки с помощью after" прямо здесь:css after
css after
css hover after
псевдоэлемент after css
псевдоэлементы css after
html css after
css after img
css after примеры
style after css
after image css
элемент after css
css after картинка
div after css
css after не работает
подчеркивание css after
hover before after css
css after изображение
css after background image
css span after
псевдокласс after в css
after не отображается css
css after img

подробнее.
подробнее.