Before and After Pseudo Elements Easily Explained [CSS]
Before and after pseudo elements are an essential part of CSS, but are often overlooked because they may seem confusing and hard to use. In this video I will take the confusion away and explain them so that you can easily incorporate them into your projects.
I'll show you some examples of ::before and ::after pseudo elements. We'll cover why we use double colons instead of single colons, the importance of the content property, and when not to use pseudo elements. Toward the end I will have two complete examples of use cases for pseudo elements.
_____________________________________
📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________
🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________
💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development - Beginners Roadmap (2020) - https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________
Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#codeSTACKr #css #learntocode
Видео Before and After Pseudo Elements Easily Explained [CSS] канала codeSTACKr
I'll show you some examples of ::before and ::after pseudo elements. We'll cover why we use double colons instead of single colons, the importance of the content property, and when not to use pseudo elements. Toward the end I will have two complete examples of use cases for pseudo elements.
_____________________________________
📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________
🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________
💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development - Beginners Roadmap (2020) - https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________
Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#codeSTACKr #css #learntocode
Видео Before and After Pseudo Elements Easily Explained [CSS] канала codeSTACKr
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![CSS Position Explained In 6 Minutes](https://i.ytimg.com/vi/XrHMv_9LCfo/default.jpg)
![](https://i.ytimg.com/vi/QUi3V7Skz4k/default.jpg)
![5 CSS mistakes that I see way too often](https://i.ytimg.com/vi/iHEkRIF7zxI/default.jpg)
![Learn CSS Pseudo Elements In 8 Minutes](https://i.ytimg.com/vi/OtBpgtqrjyo/default.jpg)
![Web Developer Roadmap 2021 | A Guide To Starting A Career In Web Development](https://i.ytimg.com/vi/7k7ETzqOxn8/default.jpg)
![Cool CSS Menu Hover Effects - Using :before and :after pseudo element - Pure CSS Tutorial](https://i.ytimg.com/vi/9t6j2UQx0Dc/default.jpg)
![CSS Before and After pseudo elements explained - part two: the content property](https://i.ytimg.com/vi/xoRbkm8XgfQ/default.jpg)
![CSS Units of Measurement [rem, em, vw, vh, px, %]](https://i.ytimg.com/vi/8UTMS3WTM0k/default.jpg)
![Three fun uses for ::before and ::after](https://i.ytimg.com/vi/QFjqxVMwIl8/default.jpg)
![Visual Studio Code 2022 | Web Dev Setup | Top Extensions, Themes, Settings, Tips & Tricks](https://i.ytimg.com/vi/fJEbVCrEMSE/default.jpg)
![](https://i.ytimg.com/vi/8TnLC5pN3Fw/default.jpg)
![Before and After pseudo elements explained - part one: how they work](https://i.ytimg.com/vi/zGiirUiWslI/default.jpg)
![Learn CSS Position In 9 Minutes](https://i.ytimg.com/vi/jx5jmI0UlXU/default.jpg)
![Improve your CSS by Keepin' it DRY](https://i.ytimg.com/vi/0px6YH-cauQ/default.jpg)
![Accordion (HTML, CSS and JavaScript)](https://i.ytimg.com/vi/dr8Emho-kYo/default.jpg)
![How To Make Range Slider Using HTML and CSS | Create Slider Selector For HTML CSS Website](https://i.ytimg.com/vi/Ow0QjqmaRtQ/default.jpg)
![49 - Practical Usage of Before and After Pseudo Elements in CSS3](https://i.ytimg.com/vi/pGrfemW4dcY/default.jpg)
![How to create a CSS-Only Accordion (Mobile Friendly) - HTML & CSS Tutorial](https://i.ytimg.com/vi/pzy_QStQaqA/default.jpg)
![How To Make Signup Form Using HTML And CSS | Create Sign Up Form In HTML CSS](https://i.ytimg.com/vi/lacpTQuE9u8/default.jpg)
![How To Make Real Time Face Detection Using JavaScript](https://i.ytimg.com/vi/h_Dj_gVXao4/default.jpg)