::before and ::after are great alternatives to add extra styling to our web page without adding additional markup to the webpage.

Syntax

• We can write pseudo-elements by (:). But the recommended syntax is (::)
• (:) is reserved for pseudo-classes and (::) is reserved for pseudo-elements.

1. pseudo-elements will not create separate markups before/after the specified tags. They are added before/after the content in the same tag.

2. We can't add pseudo-elements to the img tag because img tag doesn't have content and the img tag itself acts like content.

3. pseudo-elements are inline by default. We can add display:block to take block-level space.

Some use-cases of pseudo-elements

• Adding text before and after the paragraph.

• Adding opening and closing quotes to the blockquote elements.

Thank you for reading this blog. Will add more use-cases in future.