СКРИПТЫ
ТЕГИ:
php (284)
js (166)
html (138)
css (116)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (29)
fonts (27)
ruweb.net (23)
foto (22)
online (20)
atom (20)
forum (19)
svg (18)
Показать еще :
board (17)
hosting (17)
php file (16)
html book (16)
js method (16)
input (15)
color (15)
php date (15)
link (15)
js events (14)
osclass (13)
table (13)
htaccess (13)
path (12)
js delete (12)
dw block (12)
select (12)
download (11)
icon (11)
jsphp (11)
php time (11)
img (11)
keyboard (11)
notepad (11)
php img (11)
form (11)
url (10)
mouse (10)
yandex (9)
info (9)
js time (9)
task (7)
dosite (7)
php url (7)
hover (7)
cookie (7)
comment (7)
js url (6)
mysql (6)
list (6)
year (6)
click (6)
iframe (6)
ftp (5)
search (5)
chart (5)
browser (5)
php get (5)
mb (5)
js id (5)
value (5)
adminka (5)
heading (5)
mounth (4)
bbcode (4)
symbols (4)
vk (4)
day (4)
console (4)
js form (4)
reg.ru (4)
submit (4)
week (4)
js img (3)
line (3)
captcha (3)
ucoz (3)
https (3)
js post (3)
ssl (3)
padding (3)
vs code (3)
scandir (3)
pages (3)
рся (2)
second (2)
money (2)
youtube (2)
video (2)
js vars (2)
seo (2)
typeof (2)
sitemap (2)
title (2)
tag hr (2)
cursor (2)
counter (2)
arrows (2)
base64 (2)
qr kod (2)
details (2)
height (2)
куб (1)
books (1)
scroll (1)
domen (1)
numbers (1)
google (1)
header (1)
windows (1)
smile (1)
speed (1)
archive (1)

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

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

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

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

  1. Синтаксис after

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

    селектор:after {

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

    }

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

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

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

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

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

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

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

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


  2. Пример использования 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 и выведем его прямо здесь:
    Тут текст


  3. Добавляем картинку с помощью after

    Второй по популярности поисковый запрос после "after"... "добавить картинку с помощью after"!
    Чтобы "добавить картинку с помощью after" вам понадобится:

    Опять div.

    Опять class:

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

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

    <style>
    .after_img:after {
    content: '';
    background: url(https://dwweb.ru/___file_cms/img/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/___file_cms/img/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
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

Последние комментарии :
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
Михаил :
02.06.2022 20:10
Ну вот только для этого может быть ;) А так, нет смысла…
подробнее.
Марат :
02.06.2022 15:59
Чтобы вы зашли на данную страницу и нажали на…
подробнее.
Михаил :
02.06.2022 14:33
Ну вот только для этого может быть :) А так, нет смысла…
подробнее.
Алексей :
26.05.2022 14:19
👍👍👍
подробнее.
ruweb
Страница загружена за : 0.018787 секунд. Подробнее