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



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

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

Теги:
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
На сайте сейчас :
Ещё : Игра "пятнашки"
Угадай страну по флагу
dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.018047 секунд. Подробнее