Before and After pseudo elements explained - part one: how they work
The before and after pseudo elements are super useful part of CSS, but are often misunderstood. This is part of a three-part series where I look at how they work, and cool stuff we can do with them.
In this video, I focus on what ::before and ::after even are and how we can use them, and even why we use the double colon before them, instead of a single one (it's to distinguish them from pseudo-classes, like :hover).
One important thing with both the before and after pseudo elements is that they require us to define the content property. Without it, it defaults to none and, well, we can use it!
---
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Видео Before and After pseudo elements explained - part one: how they work канала Kevin Powell
In this video, I focus on what ::before and ::after even are and how we can use them, and even why we use the double colon before them, instead of a single one (it's to distinguish them from pseudo-classes, like :hover).
One important thing with both the before and after pseudo elements is that they require us to define the content property. Without it, it defaults to none and, well, we can use it!
---
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Видео Before and After pseudo elements explained - part one: how they work канала Kevin Powell
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
CSS Before and After pseudo elements explained - part two: the content property5 CSS mistakes that I see way too oftenAnimating with CSS Transitions - A look at the transition propertiesFloats, Flexbox, Grid? The progression of CSS layoutsCSS em and rem explained #CSS #responsiveCSS Position Tutorial | Learn CSS For BeginnersCSS Before and After Pseudo Elements in Hindi/UrduWeb design tips for developersAwesome UI Interactions with the CSS Clip Path PropertyLearn CSS Position In 9 MinutesBefore and After Pseudo Elements Easily Explained [CSS]5 CSS tricks every Web Developer should know in 2021Input Animations With HTML And CSSMaster CSS Pseudo Elements ::Before ::After in One Video in Hindi in 2020I Challenged The CSS King To A CSS BattleCSS Before and After pseudo elements explained - part three: as design elementsAre you writing responsive CSS the wrong way?CSS Positioning: Position absolute and relative explainedbox-sizing: border-box explainedLearn Every CSS Selector In 20 Minutes