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

Uploaded By: Myvideo

Published on

6 Aug 2024

30 views

0

0 votes

0

About Share Download Add to

Работа с ::after, ::before и другими псевдоэлементами в CSS. На примерах показываю, как их внедрять в HTML и делать стилизацию. Эти приёмы помогут делать вёрстку сайта более гибкой и удобной. 👁‍🗨 Телеграм: 👁‍🗨 YouTube: @alex_dudukalo 👁‍🗨 Discord: 👁‍🗨 Дзен: 👁‍🗨 Rutube: Тайм-коды: 00:00 - Начало 01:56 - Псевдоэлементы 09:09 - Иконки 13:22 - Создание карточки 19:15 - Кликабельное изображение c ::after 23:40 - data-атрибут и attr() 30:10 - Стилизация первого символа 32:26 - Стилизация первой строки 33:12 - Стилизация выделения

Share with your friends

Link:

Embed:

<iframe width="640" height="360" src="//myvideo.cc/embed/R1JZbndOUE1yRysrL3c5YkI2RnIwcjFvUkJyQitqYUl2MVo3Q3BvNmJQST0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Video Size:

Custom size:

x

Autoplay video

Hide player controls

Hide resume playing

Add to Playlist:

Favorites

My Playlist

Watch Later

You Dont Need JavaScript for That, by Kevin Powell

3 weeks ago

00:39:25

You Dont Need JavaScript for That, by Kevin Powell

1 70%

CSS для Начинающих - Практический Курс

1 month ago

01:47:36

CSS для Начинающих - Практический Курс

1 50%

Portfolio Designer 2 - Верстка приветственной секции на Flexbox с псевдоэлементом before (html, css)

1 month ago

01:00:10

Portfolio Designer 2 - Верстка приветственной секции на Flexbox с псевдоэлементом before (html, css)

50 48%

CSS3 #0 Введение (Introduction)

2 months ago

00:02:03

CSS3 #0 Введение (Introduction)

5 33%

WEB - Лекция 1. HTML5 и CSS3

2 months ago

01:10:49

WEB - Лекция 1. HTML5 и CSS3

206 45%

Использование псевдоэлементов для создания интересных анимаций кнопок // курс Веб-анимация

2 months ago

01:14:24

Использование псевдоэлементов для создания интересных анимаций кнопок // курс Веб-анимация

9 76%

CSS сниппеты для ускорения HTML верстки. Готовая подборка

3 months ago

00:10:55

CSS сниппеты для ускорения HTML верстки. Готовая подборка

22 34%

Полный курс HTML & CSS за 6 часов

3 months ago

06:38:50

Полный курс HTML & CSS за 6 часов

1 46%

Фронтенд собеседование - Junior Frontend Developer. Реальный собес. Актуальные вопросы на собесе

3 months ago

00:45:12

Фронтенд собеседование - Junior Frontend Developer. Реальный собес. Актуальные вопросы на собесе

2 16%

HTML с нуля Курс по вёрстке с HTML и CSS ч.7 - Позиционирование CSS

4 months ago

01:28:43

HTML с нуля Курс по вёрстке с HTML и CSS ч.7 - Позиционирование CSS

2 27%

CSS Pseudo-elements in 100 Seconds

4 months ago

00:01:56

CSS Pseudo-elements in 100 Seconds

2 52%

Animated CSS Login Form w Password Validation Meter

4 months ago

00:14:36

Animated CSS Login Form w Password Validation Meter

3 77%

Создание сайта с нуля + адаптивная вёрстка по макету! HTML | SCSS | БЭМ

3 months ago

02:05:14

Создание сайта с нуля + адаптивная вёрстка по макету! HTML | SCSS | БЭМ

144 31%

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

4 months ago

00:34:28

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

30 94%

Верстка саита из тестового задания. Макет NoTab. Часть 4. Верстка секции с повернутым телефоном

4 months ago

00:40:56

Верстка саита из тестового задания. Макет NoTab. Часть 4. Верстка секции с повернутым телефоном

53 45%

Верстка саита из тестового задания. Макет NoTab. Часть 3. Верстка приветственнои секции (html, css)

4 months ago

00:57:55

Верстка саита из тестового задания. Макет NoTab. Часть 3. Верстка приветственнои секции (html, css)

7 10%

Верстка саита на гридах с нуля. Organic Juicy Co. Часть 4. Верстка main (html, css, js, бэм, grid)

4 months ago

00:54:40

Верстка саита на гридах с нуля. Organic Juicy Co. Часть 4. Верстка main (html, css, js, бэм, grid)

16 53%

Верстка саита на гридах с нуля. Organic Juicy Co. Часть 2. Верстка шапки (html, css, js, grid)

4 months ago

01:04:15

Верстка саита на гридах с нуля. Organic Juicy Co. Часть 2. Верстка шапки (html, css, js, grid)

30 30%

Адаптивная верстка саита с нуля. Макет Velocity. Часть 4. Верстка Tabs и Footer (html, css, js)

4 months ago

01:02:31

Адаптивная верстка саита с нуля. Макет Velocity. Часть 4. Верстка Tabs и Footer (html, css, js)

84 53%

Урок 6.3. Псевдоэлементы

4 months ago

00:18:10

Урок 6.3. Псевдоэлементы

1 67%

HTML с нуля / Курс по вёрстке с HTML и CSS / ч.7 - Позиционирование CSS

9 months ago

01:28:43

HTML с нуля / Курс по вёрстке с HTML и CSS / ч.7 - Позиционирование CSS

69 55%

Chrome 121. Что нового scrollbar, подсветка ошибок на CSS, браузерный пререндеринг страниц

10 months ago

00:12:57

Chrome 121. Что нового scrollbar, подсветка ошибок на CSS, браузерный пререндеринг страниц

27 15%

Изучение CSS/CSS3 | #5 - Псевдоклассы и псевдоэлементы в CSS

10 months ago

00:12:01

Изучение CSS/CSS3 | #5 - Псевдоклассы и псевдоэлементы в CSS

1 17%

Урок 74. CSS каскадные таблицы стилей. Работа с текстом: изменение цвета, размера, шрифта

11 months ago

02:24:00

Урок 74. CSS каскадные таблицы стилей. Работа с текстом: изменение цвета, размера, шрифта

22 33%

0 Comments

Guest