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

Тәжірибелік нұсқаулар және стиль

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

Пікірлер: 90

  • @keeperbad1
    @keeperbad1Сағат бұрын

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

  • @sosikheh
    @sosikheh7 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Безумно приятно читать такую обратную связь ☺ ваша поддержка очень вдохновляет 🤗 спасибо!

  • @nikitadanilovspb
    @nikitadanilovspb7 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Да, псевдоэлементы часто используются в реализации элементов интерфейса. Особенно для кастомизации стандартных чекбоксов, выпадающих списков и текстовых полей :)

  • @user-iv9pw6ry6z
    @user-iv9pw6ry6z2 ай бұрын

    Спасибо! Очень полезное видео)))

  • @TheHallback41
    @TheHallback412 ай бұрын

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

  • @eugeniotur
    @eugenioturАй бұрын

    Александр спасибо большое.

  • @andreyfedyukin8360
    @andreyfedyukin83607 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Ваша поддержка очень вдохновляет 🤗 спасибо!

  • @user-sx8hg5yi6v
    @user-sx8hg5yi6v7 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо 🔥 ваша поддержка очень вдохновляет🤗

  • @ludmilas9137
    @ludmilas91377 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Ваша поддержка очень мотивирует 🤗 спасибо за отзыв!))

  • @elld1m
    @elld1m7 ай бұрын

    Спасибо огромное, Александр.

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за ваш комментарий 😊

  • @user-jq6tr6rr8v
    @user-jq6tr6rr8v7 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за ваш комментарий 🤗

  • @jobschannel9755
    @jobschannel97557 ай бұрын

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

  • @user-zo6rp1xn8i
    @user-zo6rp1xn8i5 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    5 ай бұрын

    Спасибо за ваш комментарий ☺ ваша поддержка очень мотивирует, надеюсь и другие видео канала будут вам полезны🤗

  • @russoturisto2617
    @russoturisto26176 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    6 ай бұрын

    Спасибо 🔥 ваша поддержка очень вдохновляет 🤗

  • @Af1n0chka
    @Af1n0chka3 ай бұрын

    Очень классный ролик!

  • @alex_dudukalo

    @alex_dudukalo

    3 ай бұрын

    Спасибо за комментарий :) Я очень рад, что ролик вам понравился :)

  • @user-yu8mh7yt5y
    @user-yu8mh7yt5y7 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за ваш комментарий😊 надеюсь и другие видео канала будут вам полезны))

  • @Ruslan93Nazarov
    @Ruslan93Nazarov4 ай бұрын

    лучшее видео на данную тему! спасибо

  • @alex_dudukalo

    @alex_dudukalo

    4 ай бұрын

    Очень приятно, спасибо :)

  • @user-ig4oy5wo8d
    @user-ig4oy5wo8d7 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за ваш комментарий 🤗 надеюсь и другие видео канала будут вам полезны 😊

  • @azazello505
    @azazello5056 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    6 ай бұрын

    Спасибо 🤗 ваша поддержка очень мотивирует🔥

  • @kriksqq
    @kriksqq7 ай бұрын

    Очень хорошее видео, спасибо!

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за ваш комментарий😊 надеюсь и другие видео на канале будут вам полезны))

  • @oldiBerezkoo
    @oldiBerezkoo7 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Приятно, что вы с самого начала со мной 🤗 спасибо! Ваша поддержка очень вдохновляет))

  • @user-hc7wq9om9i
    @user-hc7wq9om9i7 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за ваш комментарий😊 рад, что видео оказалось вам полезно))

  • @gm_Maker
    @gm_Maker7 ай бұрын

    Круто! Спасибо! :)

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за ваш комментарий :) Я рад, что вам понравиось видео.

  • @relaxdeepsleepmusic3608
    @relaxdeepsleepmusic36087 ай бұрын

    Крутое обучающие видео!

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо 🔥

  • @relaxdeepsleepmusic3608
    @relaxdeepsleepmusic36087 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Рад, что вы узнали что-то новое 🤗 спасибо за ваш комментарий

  • @rosen7962
    @rosen79627 ай бұрын

    Классный ролик)

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за ваш комментарий😊

  • @user-go4bz9wm3n
    @user-go4bz9wm3n4 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    4 ай бұрын

    Спасибо ☺ ваша поддержка очень мотивирует🔥 вам также желаю успехов в изучении JS 😊

  • @user-gj7er8rw2o
    @user-gj7er8rw2o7 ай бұрын

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

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Здравствуйте, Алексей. Прошу прощения за долгий ответ :) Да, я планирую такой ролик. Думаю, в скором времени он будет на канале :)

  • @dukecca
    @dukecca7 ай бұрын

    Супер!👍

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за отзыв 🤗

  • @Expertdog
    @Expertdog6 ай бұрын

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

  • @user-nf1oz1js1l
    @user-nf1oz1js1lАй бұрын

    Супер полезно

  • @user-es8bm5cq8n
    @user-es8bm5cq8n6 ай бұрын

    Спасибо Александр! Как всегда классный и полезный контент. С бейджем вообще отпад. Я бы там дивов наделал и страдал бы после, думая как их разместить, а тут оказывается все так просто))). P.S. Можно тебя попросить, затронуть такую тему как, "натяжка" готовой верстки на какую нибудь ЦМСку? Много искал и нет годного контента на Ютубе

  • @alex_dudukalo

    @alex_dudukalo

    6 ай бұрын

    Спасибо вам. Я рад, что ролик был полезным и вы досмотрели его до конца :) Спасибо за это. Да, это хорошая идея для большого ролика :) Какая CMS интересна? Wordpress?

  • @user-es8bm5cq8n

    @user-es8bm5cq8n

    6 ай бұрын

    @@alex_dudukalo да, WP, было бы супер. Спасибо. Благодаря Вам, я узнал о Веб Вёрстке и теперь изучаю ее. Я Ваi ученик на Скилл Бокс. Я учился на тестировщика и теперь не очень хочется, буду изучать веб разработку))

  • @Ilfoivleip
    @Ilfoivleip7 ай бұрын

    Спасибо!

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за отзыв😊

  • @user-vl2ci5pf5z
    @user-vl2ci5pf5z5 ай бұрын

    Молодец!!!

  • @alex_dudukalo

    @alex_dudukalo

    5 ай бұрын

    Спасибо за обратную связь🤗

  • @user-on4lv7lc9k
    @user-on4lv7lc9k6 ай бұрын

    крутой видос

  • @alex_dudukalo

    @alex_dudukalo

    6 ай бұрын

    Спасибо 🔥🔥🔥

  • @Mirrasim
    @Mirrasim7 ай бұрын

    вот это контент

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо за ваш комментарий😊

  • @scorobogatco
    @scorobogatco7 ай бұрын

    WOW❤

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо 🔥

  • @gregdmitriev2784
    @gregdmitriev27847 ай бұрын

    Ну что сказать, круто объяснил, молодец. Жаль что мне в своё время изучения вёрстки так просто не объяснили (или же я был туп😄). Кстати, можно было бы добавить касательно работы с svg, что для изменения стилей svg таки придётся использовать его в HTML в виде тега и работать непосредственно со свойствами самого svg, например такими как fill. И как по мне - уж куда интересней уметь это реализовывать в JS ) Вообще, прикольные фичи рассмотрел 👍

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Не всегда получается быстрее ответить. Да, совершенно справедливое замечание. С таким способом (как показано в видео) не получится в динамике менять стили svg. Этот способ подходит для статичных изображений или иконок. Для изменения при hover, конечно придется встроить svg сразу в html. У вас полезнейший комментарий, надеюсь его прочитают ребята, которые с этим столкнутся.

  • @user-wl2hi2hs8m
    @user-wl2hi2hs8m7 ай бұрын

    Вопрос. Вначале файла css есть настройки для всего файла *Before, After border -box: inherit. Что это? На что влияет? И как использовать?

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Это очень хороший вопрос. Постараюсь коротко объяснить. * - означает, что стили в фигурных элементах будут применены всем элементам на странице, в том числа after и before. Сам стиль border -box: inherit нужен для того, что бы настроить способ расчета размеров блоков. С учетом паддингов и бордеров или нет :)

  • @zyurkalov2779
    @zyurkalov27796 ай бұрын

    Интересно, а почему второй псевдокласс для text (32:41) не перекрасил первую букву? Ведь она находиться на первой строке 🤔

  • @alex_dudukalo

    @alex_dudukalo

    6 ай бұрын

    Очень хорошее замечание. Кажется стилизация первого символа имеет более высокий приоритет, чем стилизация всей строки. Нужно это запомнить :)

  • @18_cm
    @18_cm7 ай бұрын

    Офигеть. Не знал, что css это js на минималках))

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Даа) Функции css - это что-то ) Там такое можно делать с ними....

  • @furgos6611
    @furgos66116 ай бұрын

  • @alex_dudukalo

    @alex_dudukalo

    6 ай бұрын

    Спасибо 🔥

  • @balcony_warrior
    @balcony_warrior6 ай бұрын

    Не совсем понимаю, в чем смысл псевдоэлементов в связке с иконками. Разве нельзя просто тексту задать какой-нибудь паддинг под иконку и навесить background image?

  • @alex_dudukalo

    @alex_dudukalo

    6 ай бұрын

    Иногда бывает удобно, когда иконка находится в потоке (в виде блока) Это позволяет настраивать быстрое выравнивание с помощью флекс и дает другие возможности. Но, конечно можно сделать и фоном :)

  • @patriziapepe3
    @patriziapepe37 ай бұрын

    Понравилось

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо 🔥 надеюсь и другие видео канала будут вам полезны

  • @Dmitry_samboRulit
    @Dmitry_samboRulit7 ай бұрын

    Здравствуйте. Вы, наверное, сдали это видео, т.к. знаете сложности студентов при выполнении домашнего задания модуля 11.12 на факультете Фронтенд разработчик pro. Очень не просто было сделать эту домашку, если нет понимая принципов работы псевдоэлементов, особенно в сочетании с позиционированием (position)

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Здравствуйте, Дмитрий. Не всегда получается ответить быстрее, но очень стараюсь. Да, вы совершенно правы, как и многие другие видео я делаю именно по причине того, что темы даются сложно и я пытаюсь и сделать чуть понятнее. Не всегда получается, но очень стараюсь :) Спасибо за ваш комментарий, да я понимаю вас. Самому в свое время было понять позиционирование не просто )) Теперь делаюсь опытом.

  • @gogydogy6544
    @gogydogy65444 ай бұрын

    Интересно было что за элементы такие, теперь все понятно стало

  • @alex_dudukalo

    @alex_dudukalo

    4 ай бұрын

    Я рад, что видео помогло понять для чего они нужны :) Думаю, вы сможете их исользовать с пользой :)

  • @senianga1
    @senianga17 ай бұрын

    годно!

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо 🔥

  • @user-kk2xw8uv4u
    @user-kk2xw8uv4u7 ай бұрын

    Спасибо!

  • @alex_dudukalo

    @alex_dudukalo

    7 ай бұрын

    Спасибо 🔥

Келесі