В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
css (131)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (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 и выведем его прямо здесь:

    Тут текст
    [kod]

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

    Тут текст
    [kod]
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.017764 секунд. Подробнее