You Still Don’t Understand Before and After Pseudo-Elements | CSS Course

The before and after pseudo-elements allow you to add content to a page using CSS. In this CSS pseudo-elements tutorial, Adi Purdila will teach you how to use them correctly.
► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_camp...

CSS pseudo-elements have a variety of use cases. For example, pseudo-elements are great for custom lists and animated tooltips, and more advanced things like gradient shadows for images. But they're often not properly understood, so make sure to watch this course to learn everything you need to know.

Assets Used in This Video:
• Source files: https://github.com/tutsplus/You-Still...
• Pseudo-elements on Can I Use: https://caniuse.com/css-gencontent
• Pseudo-elements on MDN: https://developer.mozilla.org/en-US/d...
• ::after - CSS on MDN: https://developer.mozilla.org/en-US/d...
• ::before - CSS on MDN: https://developer.mozilla.org/en-US/d...
• Photo by Judeus Samson on Unsplash: https://unsplash.com/photos/0UECcInuCR4
• Photo by Alireza Dolati on Unsplash: https://unsplash.com/photos/OVS3rqXq9gg
• Photo by Luisa Brimble on Unsplash: https://unsplash.com/photos/2RrBE90w0T8
• Icons by Font Awesome: https://fontawesome.com/
• Adam Argyle Technique for CSS Gradient Shadows‌:   / 1429075313158496261  

00:00 Introduction
02:00 Basic Usage of ::before and ::after
12:48 5 Use Cases for ::before and ::after

Learn more in our free course on pseudo-elements on Envato Tuts+: https://webdesign.tutsplus.com/course...

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt...

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_camp...

► Subscribe to Envato Tuts+ on YouTube:    / tutsplus  
► Follow Envato Tuts+ on Twitter:   / envato  
► Follow Envato on Facebook:   / envato  
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -