::before and ::after are great alternatives to add extra styling to our web page without adding additional markup to the webpage.
- We can write pseudo-elements by (:). But the recommended syntax is (::)
- (:) is reserved for pseudo-classes and (::) is reserved for pseudo-elements.
pseudo-elements will not create separate markups before/after the specified tags. They are added before/after the content in the same tag.
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.
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.