Use Cases of CSS Generated Content With :before And :after
Written by Samiullah Khan on 8 March 2016
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
- ::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.
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.