Псевдоэлементы CSS ::after и ::before. Объяснение на примерах

preview_player
Показать описание
Работа с ::after, ::before и другими псевдоэлементами в CSS. На примерах показываю, как их внедрять в HTML и делать стилизацию. Эти приёмы помогут делать вёрстку сайта более гибкой и удобной. 

Тайм-коды:
00:00 - Начало
01:56 - Псевдоэлементы
09:09 - Иконки
13:22 - Создание карточки
19:15 - Кликабельное изображение c ::after
23:40 - data-атрибут и attr()
30:10 - Стилизация первого символа
32:26 - Стилизация первой строки
33:12 - Стилизация выделения
  1. Александр Дудукало
  2. Frontend
  3. Skillbox
  4. Скиллбокс
  5. Фронтенд
  6. Разработка сайта
Рекомендации по теме
Псевдоэлементы before и 0:11:55

Псевдоэлементы before и after в CSS: разбор примеров

CSS псевдоэлементы. Псевдоэлементы 0:14:31

CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11...

Псевдоэлементы CSS ::after 0:34:29

Псевдоэлементы CSS ::after и ::before. Объяснение на примерах

Псевдоэлементы Before и 0:04:51

Псевдоэлементы Before и After. Как применять Псевдоэлементы. Какие псевдоэлементы существуют...

Псевдоэлементы before и 0:17:41

Псевдоэлементы before и after в CSS

CSS псевдоэлементы — 0:07:42

CSS псевдоэлементы — before, after, placeholder, selection, marker, file-selector-button, first-line...

Псевдоэлементы before и 0:05:45

Псевдоэлементы before и after в CSS: добавляем контент до и после HTML элемента...

Псевдоэлементы before и 0:14:57

Псевдоэлементы before и after. Как правильно писать? Фишки ::before и ::after...

Псевдо-элементы ::before и 0:25:52

Псевдо-элементы ::before и ::after. Свойство content || Курс CSS от А до Я...

#31 Псевдоэлементы: before, 0:15:45

#31 Псевдоэлементы: before, after, first-line, first-letter [Курс по Верстке от AROKEN]...

CSS3 #4 Псевдоэлементы 0:12:43

CSS3 #4 Псевдоэлементы и псевдоклассы (Pseudo-elements & Pseudo-classes)...

7 # урок 0:05:48

7 # урок по CSS - Псевдоэлементы before и after

Какие значения css-свойства 0:06:40

Какие значения css-свойства content валидны, а какие — нет? | Псевдоэлементы before и after в CSS...

Псевдоэлементы в CSS 0:14:40

Псевдоэлементы в CSS

Свойство content, before 0:15:20

Свойство content, before и after на CSS, Видео курс по CSS, Урок 21

HTML/CSS || Псевдоэлементы 0:52:48

HTML/CSS || Псевдоэлементы (before, after), псевдоклассы(type)

Пример использования after 0:01:01

Пример использования after и before в css. Часть 1

CSS с нуля. 0:00:31

CSS с нуля. Псевдоэлемент CSS :before

CSS для начинающих: 0:12:55

CSS для начинающих: Псевдоклассы (after, before), урок 18!

CSS ::before ::after 0:00:55

CSS ::before ::after

Псевдоклассы и псевдоэлементы 0:13:30

Псевдоклассы и псевдоэлементы на CSS, Язык CSS для новичков, Урок 7...

HTML CSS: псевдоэлементы 0:50:26

HTML CSS: псевдоэлементы before и after, верстка блока smoothie

Пример использования after 0:01:00

Пример использования after и before в CSS. Часть 2

псевдоэлементы в css 0:10:46

псевдоэлементы в css

Комментарии
Автор

Просто супер, на фоне скучных и линейных видео про псевдоклассы и покраски текста, это как оазиз в пустыне, спасибо большое!

keeperbad
Автор

Спасибо большое за твои видео, почти все просмотрел, на твоих видео только и учусь, максимально понятно объясняешь, прям разжевываешь, для всех идеальный подход, огромное спасибо!!! лучший канал

sosikheh
Автор

Классный ролик, как раз в финальной работе базовой вёрстки подвис на ui-kit в самом конце уже, ролик должен помочь. Александру огромное спасибо за труд!

nikitadanilovspb
Автор

спасибо! очень классно обьясняешь ! удачи и роста !

TheHallback
Автор

Спасибо большое, очень информативно!)

jqtrrrv
Автор

Александр спасибо большое, ваши ролики просто бомба!!!

russoturisto
Автор

Александр! Топ контент!!! Мне как раз надо было❤️❤️❤️ спасибо!

zorpxni
Автор

Спасибо, очень интересно с data атрибутом. Годный контент как всегда.)

sxhgyiv
Автор

Быстро растёшь так держать! Красавчик, то чувство когда подписался на канал было вообще очень мало подписчиков а сейчас уже 7к!

oldiBerezkoo
Автор

Супер 👍 Спасибо. Очень полезный материал.

andreyfedyukin
Автор

Спасибо! Как всегда очень полезно, информативно, доступно в объяснении!

ludmilas
Автор

Класс, спасибо! Отличнейший ролик. Всё чётко и по делу.

azazello
Автор

Спасибо Александр! Очень доходчиво и методически все выверено. Вы большой молодец.

yumhyty
Автор

Проверьте мою работу Александр, я сделал 😊

jobschannel
Автор

Спасибо большое, было очень интересно 🔥🔥🔥👍

hcwqomi
Автор

С data атрибутом классно получилось для меня это в новинку, Александр лайк однозначно 👍

relaxdeepsleepmusic
Автор

Крутой урок!!!! Смотрел видео для повторения и закрепления знаний по псевдоэлементам и был максимально приятно удивлен. Очень интересные фишки по применению псевдоэлементов про которые и не знал )) Огромное спасибо за данный урок!!!

igoywod
Автор

Очень бы хотелось увидеть от вас видео на тему адаптивной вёрстки! Было бы очень полезно. И спасибо за контент, который уже сделан

gjerrwo
Автор

Слов нет, на сколько полезная информация, просто и доступно, однозначно в избранное! Успехов Вам

gobzwmn
Автор

Хорошее видео! все понятно и доступно! Хорошо если бы были примеры как before и after взаимодействуют с hover и если там svg то можно ли при наведении менять цвет? Но гугл в помощь, будем искать)))) Благодарю за супер канал и видео!

Expertdog