Product Preview Card Component 🎯. ( BEM + Responsive Images )

Hello @danielmrz-dev,

I was wondering the same thing about how can I get the solution to look exactly like the design.

Thank you so much!

Hello @Alil0l ,

Thanks for checking out my solution.

The reason to use ::before and ::after for * element is that when you define a ::before and ::after element or pseudo classes, then it help with their positioning with setting their margin and padding to 0, and box-sizing to border-box.

Overall it is a best practice in CSS to do so.

Commonly you will see,

*{ margin: 0; padding: 0; box-sizing: border-box; }

from the start the browser applies some default margins and padding to HTML elements, We use this base style to reset that style.

Check out more here :-

-Why do we set the base style?

-What is box-sizing?

That is everything, If you have more questions, feel free to ask. I will be more than happy to help 😃

Have Fun Coding!