Mark Noonan posted this article about what pseudo-elements are and how to use them, as well as look at some common use cases where these pseudo-elements can make life easier for us.
::before and ::after are great for decorations like custom bullet points, arrows, or other features that should go with an HTML element, but are not part of the main content of the element. Often you can achieve the same result by adding extra HTML elements to your markup, and pseudo-elements are a way to avoid clutter.
The article content is split into:
- First, why are they called pseudo-elements?
- Always set the content property
- What are these pseudo-elements used for and why?
Unlike most other elements, ::before and ::after don’t appear in the HTML code for a page.
Just remember, there are many possible uses of pseudo-elements available, and you can learn more in Kevin Powell’s awesome video series about them on YouTube. Nice one!
[Read More]