Learn CSS ::before and ::after in 4 Minutes

CSS Pseudo Elements Tutorial for beginners with creative code examples, explanations and animations about css pseudo-elements ::before and ::after, how to they work and how to use them. In this tutorial, we'll show you how to use ::before and ::after pseudo-elements to achieve creative designs that aren't possible with regular CSS.

*Check out our website*:

* Get our HTML Udemy Course*:

*Host your own website with Hostinger*:
Use our code CODING2GO to get a 10% discount

*What You'll Learn*:
Creating Custom Bullet Points: Replace default HTML list bullets with custom designs using ::before.
Animating Backgrounds: Add animations to backgrounds with ::after.
Floating Design Elements: Add floating design elements without extra HTML.
Advanced Styling Techniques: Use gradients, border-radius, hover effects, transitions, and animations with pseudo-elements.

Key Points:
Pseudo-Elements: They only exist in CSS, not in your HTML code.
Content Property: Required even if it’s an empty string.
Positioning: Use position: absolute; on pseudo-elements and position: relative; on the parent element.
Styling: Apply any CSS properties like background-color, gradients, shadows, etc.

Practical Examples:
Underline headings with custom styles.
Redesign bullet points using ::before.
Create cool hover animations with ::after.

Topics:
HTML tutorial, CSS tutorial, CSS pseudo-elements, ::before CSS, ::after CSS, custom bullet points, background animations, web design tips, learn CSS, Beginner Tutorial, web development

*Background Music*

Track: "Little Things"

Track: "One More Night"

[gonzalobruna]

this is seriously the best explanation I've ever heard

[kooyaw]

I've been coding for almost 2 years, never really understood these CSS properties till today

[juhen]

Bro said max-content 🤯 thanks! Great vid

[codesthenos]

GREAT EXPLANATION for real less than 4 minutes of pure gold

[Manishincode]

Just discovered this channel today and 1 thing i really loved about this is he really cares for the time 😄

[dikans]

I usually copy those pseudo class without trully understanding what they really means. Now I can see the true power of it. Easy to understand, not wasting time

[zackstorm]

yow, its been days that i see it and never understood the meaning, i was afraid to look for a video and finish by watching a video of 1h but you saved me thanks, now im gonna go see the video about positions

[awesomejr.]

Wow... I have been coding for years now and this is the first time am understanding CSS pseudo after and before.

Thank you so much for this video. You're a good teacher. 😊

[Thekidisalright]

Omg, I have trying to understand the use cases of ::before and ::after as a self-taught programmer for so long and your video just explain it so simply in minutes, you have earned a sub my friend, thank you.

[reginoryanchristian]

I can't believe this is free, this video is Udemy level tutorial.❤

[isaidstream]

Thank you for teachin me that pseudo elements are not as important as I thought. 😂 So ::after and ::before can wait

[strategistaow]

Finally
I had problems understanding those
Especially before and after why they are called that way what difference they make
I see that they can be used as same thing
Now i understand them way better

[keochanmarido]

This is the best explain CSS before and after class. Thank you for your hard work in explaining and editing the video to show me how it was done. Keep up the good work.

[hosseinZ]

For the first time I'm eager to do some CSS 😂 Amazing video, thanks.

[kareembamidele]

I'm so happy I am more comfortable and confident using ::before and ::after pseudo element

[akatsuki]

Man, I've been struggling with this for so long now. And the explanations I was getting just did not make sense to make. Thank you for this video

[ashkanahmadi]

Great video thanks. Just a note: you should be using the :marker pseudo element for styling the bullet points

[dsymhse]

Nobody can surpass you sir, hats off hats off. I am literally not getting how to praise you .For real.
This is the first ever tutorial in my life, that, I learned something new which I wanted to understand, and that too within 4 minutes. Your explanation was really nice super fantastic 👏 ❤

[MrSatisfaction-wzgb]

Just WOW. I always wondered how people create so detailed hover animations!

[keerthikak]

I really messed about how to got that ordered list items style to coloured ...Now cleared.. Thank you for posting this. Keep posting the stuffs like this❤