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

Поделиться
HTML-код
  • Опубликовано: 28 ноя 2024

Комментарии • 90

  • @keeperbad1
    @keeperbad1 5 месяцев назад +2

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

  • @sosikheh
    @sosikheh Год назад +6

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад +1

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

  • @nikitadanilovspb
    @nikitadanilovspb Год назад +3

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @kosmonavt980
    @kosmonavt980 2 месяца назад +1

    отличный урок, все доступно объяснили, спасибо Александр

    • @alex_dudukalo
      @alex_dudukalo  2 месяца назад

      Большое спасибо за приятный комментарий :)

  • @АлександрСитников-ы7я

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @ЛеонидМалычев
    @ЛеонидМалычев Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @ДашаНовикова-ж4ж
    @ДашаНовикова-ж4ж 8 месяцев назад +1

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

  • @ЮсуповРамиль-р3ц
    @ЮсуповРамиль-р3ц 10 месяцев назад

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

    • @alex_dudukalo
      @alex_dudukalo  10 месяцев назад

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

  • @СергейКапитонов-у1э

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @russoturisto2617
    @russoturisto2617 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @jobschannel9755
    @jobschannel9755 Год назад +3

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

  • @ЮляСолнце-ь2у
    @ЮляСолнце-ь2у 11 месяцев назад

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

    • @alex_dudukalo
      @alex_dudukalo  11 месяцев назад

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

  • @azazello505
    @azazello505 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @eugeniotur
    @eugeniotur 7 месяцев назад

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

  • @elld1m
    @elld1m Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @ludmilas9137
    @ludmilas9137 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @Ruslan93Nazarov
    @Ruslan93Nazarov 10 месяцев назад

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

    • @alex_dudukalo
      @alex_dudukalo  10 месяцев назад

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

  • @АлексейШацких-г7щ
    @АлексейШацких-г7щ Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @TheHallback41
    @TheHallback41 8 месяцев назад

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

  • @relaxdeepsleepmusic3608
    @relaxdeepsleepmusic3608 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @Af1n0chka
    @Af1n0chka 8 месяцев назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  8 месяцев назад

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

  • @oldiBerezkoo
    @oldiBerezkoo Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @gm_Maker
    @gm_Maker Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @andreyfedyukin8360
    @andreyfedyukin8360 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @ВиталийРябенко-з1ь

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @МаксимМазур-д2х
    @МаксимМазур-д2х Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

    • @МаксимМазур-д2х
      @МаксимМазур-д2х Год назад

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

  • @kriksqq
    @kriksqq Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @НикитаСмирнов-ъ2п

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад +1

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

  • @relaxdeepsleepmusic3608
    @relaxdeepsleepmusic3608 Год назад

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

  • @Expertdog
    @Expertdog Год назад

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

  • @rosen7962
    @rosen7962 Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @bjol_Dg
    @bjol_Dg Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @Mirrasim
    @Mirrasim Год назад

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @АнтонСафонов-ю3щ
    @АнтонСафонов-ю3щ 11 месяцев назад

    Молодец!!!

    • @alex_dudukalo
      @alex_dudukalo  11 месяцев назад

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

  • @Ilfoivleip
    @Ilfoivleip Год назад

    Спасибо!

  • @zyurkalov2779
    @zyurkalov2779 Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад +1

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

  • @dukecca
    @dukecca Год назад

    Супер!👍

  • @НикМеняйсяилисни

    крутой видос

  • @ВладимирВиноградов-щ1к

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @ОлуксійСергіїович
    @ОлуксійСергіїович 7 месяцев назад

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

  • @balcony_warrior
    @balcony_warrior Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад +1

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

  • @Path_to_Success-6
    @Path_to_Success-6 Год назад

    WOW❤

  • @patriziapepe3
    @patriziapepe3 Год назад

    Понравилось

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @trenersambo
    @trenersambo Год назад +1

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

    • @alex_dudukalo
      @alex_dudukalo  Год назад

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

  • @furgos6611
    @furgos6611 Год назад

  • @senianga1
    @senianga1 Год назад

    годно!

  • @Алексей-с2с7ж
    @Алексей-с2с7ж Год назад

    Спасибо!