CSS Tricks: Before and After!No, this is not about a tv show in which I take a CSS and make it prettierCSS Tricks: Before and After!8 months ago in HTML & CSS & Scripting More Like This
It is about the pseudo-elements ::before and ::after.
They are similiar for example to the :hover element, meaning that it is not necessary (or possible) to add them to the HTML, but can be controlled purely by writing CSS. They are always there, but whether they are visible depends on whether you code them or not.
::before and ::after are almost self-explanatory pseudo-elements. They define what happens either before or after a regular HTML element. They can be applied to any element.
Let's get right going!
So in the first simple example we are going to add guillemets, also known as French quotation marks, to direct speech in our text. The usefulness of this may stand to debate, you could easily just type it out, but it is a nice and easy way to get started with explaining ::before and ::after.
We will take advantage of the i HTML class fo