saiprasad padhy
Sai Prasad

Follow

Sai Prasad

Follow
::before ::after pseudo-elements

::before ::after pseudo-elements

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

saiprasad padhy's photo
saiprasad padhy
ยทNov 19, 2022ยท

1 min read

Table of contents

  • Syntax
  • Some use-cases of pseudo-elements

::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.

ย 
Share this