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

  Рет қаралды 21,245

Просто: разработка

Просто: разработка

5 жыл бұрын

Привет! Сегодня я хочу более подробно рассказать тебе про псевдоэлемент before и псевдоэлемент after. Если ты смотрел ранее видео на моем канале, ты мог видеть как я применяю псевдоэлементы html во время верстки макета, а также я применял псевдоклассы и псевдоэлементы во время стилизации чекбокса. Поэтому это видео будет скорее теоретическое про применение псевдоэлементов. Расскажу о том, какие псевдоэлементы существуют, как применять псевдоэлементы и какие есть свойства псевдоэлементов. Например, по умолчанию они идут как псевдоэлемент inline, но это можно переопределять. Это видео про псевдоклассы и псевдоэлементы css, в том числе про псевдоэлемент after css. Расскажу подробнее про использование псевдоэлементов и про селекторы псевдоэлементов. Например, вы знали что псевдоэлементы before и after можно применять не ко всем тегам/элементам? Дело в том, что теги делятся на два типа: replace element и void element, более подробно об этом в видео. После просмотра вы узнаете больше про псевдоэлементы css before after.

Пікірлер: 35
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@user-qd7hv1mb5k
@user-qd7hv1mb5k 4 жыл бұрын
Виталий, большое спасибо за ваш труд, я фанат каждого из ваших видео! Наконец-то я нашел канал, где меньше всего воды, и больше всего актуальной информации. После каждого просмотра чувствую как на микрон увеличивается мой скилл в верстке, еще раз спасибо!
@donaks
@donaks 4 жыл бұрын
Большое спасибо, бро!
@hakeeeem
@hakeeeem 2 жыл бұрын
Благодарю за ваш контент
@phello57
@phello57 3 жыл бұрын
Никогда в программировании не объясняйте как что то работает без показа этого на экране компьютера. Ничего не усваивается, нужно конкретно видеть то, о чем говорится
@user-bj8oe1gt3r
@user-bj8oe1gt3r 5 ай бұрын
Вот за этот список спасибо большое, теперь понятно почему у меня ничего не работает)
@TheTexPro
@TheTexPro 4 жыл бұрын
Спасибо!
@webdevelopment5337
@webdevelopment5337 4 жыл бұрын
Спасибо)
@toto4q718
@toto4q718 2 жыл бұрын
Было бы здорово, если бы вы почаще вставляли изображения (как здесь 3:30), так лучше воспринимается и крепче запоминается ваш материал. Спасибо за видео!
@user-kz7pp7rm6m
@user-kz7pp7rm6m 2 жыл бұрын
а в блоках вопрос-ответ кружочки раскрывающиеся в списке, их тоже псевдоэлементами делать надо?
@raymond1489
@raymond1489 4 жыл бұрын
Нихуя не понял, но было интересно.
@donaks
@donaks 4 жыл бұрын
Все понятно -_-
@vladislava_sim
@vladislava_sim 3 жыл бұрын
подача информации хорошая, голос приятный, только минус в том, что вы сказали о псевдоэлементах лишь в общем, не показав, например, как это выглядит в коде
@musicforsleepandrelaxation5149
@musicforsleepandrelaxation5149 4 жыл бұрын
Виталий, добрый день! А как можно с помощью псевдоэлемента растянуть ссылку относительно блока? Например, есть картинка, а на ней расположена ссылка, при наведении на картинку мы как бы можем кликнуть на ссылку.
@prosto_razrabotka
@prosto_razrabotka 4 жыл бұрын
В картинке чисто технически не может быть ссылки...
@user-xb9fi1bb6i
@user-xb9fi1bb6i 3 жыл бұрын
Есть svg иконка. Нужно через комбинацию :hover и ::after реализовать всплывающую подсказку с названием. Не выходит. Скорее всего я не правильно подключаю svg. Каким образом мне его оформить чтоб сработала моя комбинация? Через ссылку в .html не работает и как картинка тоже. Как его правильно подключить? Я только учусь. Постоянно возникают вопросы 😐
@-game9406
@-game9406 3 жыл бұрын
Создай div в ширину svg, а сам svg сделай фоном diva. На див поставь ховер Понимаю, что поздно, но все же ответил. Отпишись, если помогло
@prosto_razrabotka
@prosto_razrabotka 5 жыл бұрын
Полезное было видео?
@Istanislav1
@Istanislav1 5 жыл бұрын
да, действительно полезное дополнение к предыдущим роликам. Стало понятнее, что значит ПСЕВДО (физическое отсутствие в DOM-дереве, ) - это путает при первом взгляде, изучая стили
@melissasofie7681
@melissasofie7681 4 жыл бұрын
Да. 👍
@user-kp8wj5fj7u
@user-kp8wj5fj7u 4 жыл бұрын
Видео полезное, но если бы демонстрировали, то вообще огонь было бы
@PauILIL
@PauILIL 3 жыл бұрын
Нихрена не понял, зачем они нужны.
@user-gn6km5lg7b
@user-gn6km5lg7b 3 жыл бұрын
Нет
@adiks09
@adiks09 4 жыл бұрын
Я наконец узнал что это тултипы и их можно делать не с помощью картинки)
@prosto_razrabotka
@prosto_razrabotka 4 жыл бұрын
Только не тулЬтипы, а тултипы -)) От английского "tooltip"
@ostaprobin1189
@ostaprobin1189 Жыл бұрын
а где Afore?
@user-wb1hy3dg1k
@user-wb1hy3dg1k Жыл бұрын
C G C
@user-sj4oy1el5y
@user-sj4oy1el5y 4 жыл бұрын
ыв
@mushnikov35
@mushnikov35 4 жыл бұрын
Молодец червячок )) без обид, просто похож )
@asilbekyoldoshbekov5533
@asilbekyoldoshbekov5533 4 жыл бұрын
:)
@user-dd8od2pc2o
@user-dd8od2pc2o 26 күн бұрын
Ничего не сказал о том, что к псевдоэлементам нельзя обратиться через JavaScript
ВСЁ, что нужно знать о CSS Селекторах. Типы селекторы css
42:23
Before and After pseudo elements explained - part one: how they work
9:08
ХОТЯ БЫ КИНОДА 2 - официальный фильм
1:35:34
ХОТЯ БЫ В КИНО
Рет қаралды 2,8 МЛН
狼来了的故事你们听过吗?#天使 #小丑 #超人不会飞
00:42
超人不会飞
Рет қаралды 65 МЛН
ONE MORE SUBSCRIBER FOR 6 MILLION!
00:38
Horror Skunx
Рет қаралды 15 МЛН
Виджет "Курсы валют" на JavaScript за 16 минут
16:28
Просто: разработка
Рет қаралды 12 М.
How To Make Toggle Button Using HTML & CSS
5:27
MakeTechStuff
Рет қаралды 64 М.
CSS Pseudo elements Before and After: Examples
11:55
Анна Блок
Рет қаралды 101 М.
ХОТЯ БЫ КИНОДА 2 - официальный фильм
1:35:34
ХОТЯ БЫ В КИНО
Рет қаралды 2,8 МЛН