СКРИПТЫ
ТЕГИ:
php (319)
js (238)
html (145)
css (125)
html tags (62)
js tag (56)
jquery (41)
text (36)
js method (35)
js date (32)
php array (31)
form html (30)
fonts (27)
link (26)
Показать еще :
online (25)
ruweb.net (24)
foto (22)
php file (21)
atom (20)
forum (19)
hosting (18)
svg (18)
php date (17)
board (16)
html book (16)
input (16)
php time (16)
color (15)
js events (14)
js url (14)
notepad (13)
osclass (13)
htaccess (13)
img (13)
js time (13)
php img (12)
select (12)
знак (12)
table (12)
dw block (12)
info (12)
php path (12)
download (11)
keyboard (11)
jsphp (11)
form (11)
icon (11)
mouse (10)
yandex (10)
js delete (10)
hover (9)
dosite (8)
comment (7)
cookie (7)
php url (7)
year (6)
mysql (6)
iframe (6)
browser (6)
list (6)
click (6)
php get (6)
adminka (5)
tag a (5)
js math (5)
chart (5)
heading (5)
reg.ru (5)
mb (5)
search (5)
ftp (5)
js id (5)
value (5)
base64 (4)
week (4)
day (4)
ssl (4)
bbcode (4)
нок (4)
vk (4)
js form (4)
submit (4)
php var (4)
month (4)
pages (4)
symbols (4)
task (4)
console (4)
куб (3)
captcha (3)
domen (3)
js post (3)
line (3)
ucoz (3)
numbers (3)
padding (3)
js img (3)
https (3)
js hash (3)
vs code (3)
scandir (3)
рся (2)
seo (2)
prompt (2)
counter (2)
height (2)
google (2)
details (2)
js vars (2)
video (2)
sitemap (2)
tag hr (2)
youtube (2)
arrows (2)
typeof (2)
money (2)
qr kod (2)
нод (1)
rutube (1)
jino (1)
cursor (1)
header (1)
speed (1)
windows (1)
archive (1)
smile (1)
scroll (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/__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
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.019634 секунд. Подробнее