Use Cases of CSS Generated Content With :before And :after

According to W3C

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element’s content — Selectors Level 3 W3C Recommendation

Going through some old notes, I came across the one where I was figuring out different use-cases for css generated content. The :: notation is later added to the specification. The main reason is to distinguish them from Pseudo-Classes i-e :hover,:active,:link. Nevertheless most of the browser has the support for both notations.

Although CSS generated content list goes on an on, some of them are

• ::before
• ::after
• ::first-line
• ::first-letter
• ::selection
• ::backdrop
• ::placeholder (experimental)
• ::marker (experimental)

So according to my note some of the aid ::before and ::after can give us are:

1. Giving visual feedback :

to the user for external links or download links, for instance to display a pdf icon in front of pdf document or letting user know immediately know where this link would take them.

2. Creating shapes :

for instance borders used to create triangle that can also be used as a drop down menu icon. In following example, hover over projects to reveal a drop down menu. Here a triangle pointing downward is a clear indication to not miss the awesome content.

See the Pen bpEyLY by Samiullah Khan (@samiullah1989) on CodePen.

Click on the CSS tab above and scroll all the way to bottom to find the CSS code to have that effect.

3. Clearing the Floats:

Nicolas Gallagher mirco clearfix hack which uses those elements in great detail.

How you have used or going to use in your projects. Kindly share your use-cases so that I can keep this post updated with newer ones.