CSS ::after и ::before - ВСЯ ПРАВДА ✅ #css #css3 #javascript #js #learning #course #shorts #html

::after и ::before это самые часто используемые псевдоэлементы. Знаете ли вы все их возможности? Давайте проверим.

По умолчанию эти псевдоэлементы становятся первым и последним потомком в строке, так как они являются строчными. Свойство content обязательно для отображения их на странице. С помощью них мы можем:
- добавить обычный текст;
- добавить иконки как текст или как unicode-символы;
- добавим картинку и она будет псевдоэлементом;
- можем отобразить любой атрибут элемента. Например все классы на элементе или его id. Для ссылки можно вывести ее href. К вставляемому контенту можно добавлять текст. Можно также выводить и кастомные атрибуты;
- можно вставить открывающие и закрывающие кавычки. Их тип будет зависеть от используемого языка или заданного типа кавычек в свойстве quotes;
- так же можно вывести значение счетчика заданного свойством counter-reset.

Но вся их мощь проявляется в создании декоративных эффектов. Например динамическое подчеркивание как у ссылки или для создания размытого фона при стилизация карточки.
Главное помнить, что они не применяются к замещаемым элементам img, br, iframe, video, embed, canvas, audio, object.

#css #css3 #js #javascript #frontend #html #web #webdevelopment #htmlcss #html5 #csshtml #css3html5 #css3code #css3tutorial #htmltutorial #htmlelements #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects #webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #vue #react #angular #svelte #vanillajs #animation #cssawesome #learncss #course #programming #crash_course #learning #fariga

Подписывайтесь на меня в соц. сетях:
????‍???? LinkedIn - https://www.linkedin.com/in/maksymfariga
???? Instagram - https://www.instagram.com/maksym_fariga/ (@maksym_fariga)
???? Facebook - https://www.facebook.com/maksymfariga/
???? Twitter - https://twitter.com/Fariga_M
???? Telegram - https://t.me/web_education_new

???? НОВЫЕ ЕДИНИЦЫ измерения в CSS / полный разбор с примерами на РЕАЛЬНЫХ???? устройствах ???? https://youtu.be/ANzzt8R7EzQ ✍️
???? CSS знает о вас ВСЁ ???? - image-orientation (New CSS) ???? https://youtu.be/dICP6cmiu30 ✍️
???? Новое CSS свойство image-rendering - Next CSS Level ???? https://youtu.be/vj7FygQE7dA ✍️
???? Основы CSS - свойство aspect-ratio - полный разбор ???? https://youtu.be/y2VMHBkoSi0 ✍️
????????‍♂️ Accent-color - CSS свойство, которое не смогло ???? https://youtu.be/5oYc--MU-EU ✍️
???? CSS keywords: inherit, initial, unset, revert, all ???? https://youtu.be/eD1pK5gqhVA ✍️
???? CSS text-stroke, text-fill-color и paint-order ???? https://youtu.be/atx6jomLDmw ✍️