Học CSS ::before và ::after trong 4 Phút

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.

Become a Member to Support our Channel:

👉 https://www.youtube.com/channel/UCGpoeEhUBQBaaKZ_a8HB67Q/join

*Check out our website*:

👉 https://www.coding2go.com

* Get our HTML Udemy Course*:

👉 https://www.udemy.com/course/coding2go-html5-crashcourse/?referralCode=F017D565D3D3BE47B8BC

*Host your own website with Hostinger*:

👉 https://www.hostinger.com/coding2go

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"

Music provided by https://Slip.stream

Free Download/Stream: https://get.slip.stream/QmMj1I

Track: "One More Night"

Música fornecida por https://Slip.stream

Download grátis/Stream: https://get.slip.stream/8j1Eo5