Псевдоэлемент ::after (:after)- для чего/использование/примеры

Подробно о after в css и html.

1. Синтаксис after
2. Пример использования after в css/html
3. Добавляем картинку с помощью after

Скопировать ссылку



Синтаксис after

Начнем с синтаксиса "after" в css :

селектор:after {

content: "вставляемый контент";

}

Разбираем синтаксис after

Выше вы увидели синтаксис "after"... давайте разберем немного ...

селектор - это может быть(например) - класс, id и др селекторы

after - создает псевдоэлемент(как было сказано выше)...

content - двоеточие...одинарные/либо двойные кавычки, внутри кавычек содержание/контент...

Где/зачем используется after

After используется для добавления контента после содержания селектора.

Смотри примеры использования "after" css.

Скопировать ссылку



Пример использования after в css/html

Надеюсь, что с синтаксисом "after" вы разобрались... если нет, то ничего страшного не произошло! Разберем использования "after" на примерах и тогда всё станет ясно!


Для того, чтобы создать пример с использованием after вам понадобится:

Нам нужен элемент html, пусть это будет div.

Добавим ему class с произвольным значением = "example"

<div class=example>Тут текст</div>

Пропишем стили к данному классу и используем "after".

В "content" поместим произвольное содержание... и покрасим его в красный, чтобы вы могли отличить контент добавленный с помощью "after" от текста

<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:

<div class=after_img>Тут текст</div>

Добавим стили, в background положим ссылку на картинку

<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"
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" прямо здесь:

Тут текст

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---