Learn the basics of CSS Pseudo Elements
Sometimes you will spot them in the wild with a single colon, but this is only a syntax supported for backwards compatibility reasons. You should use 2 colons to distinguish them from pseudo-classes.
Download The PDF::before and ::after are probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example.
creates a pseudo-element after the element
creates a pseudo-element before the element
can be used to style the first letter of a block of text
can be used to style the first line of a block of text
targets the text selected by the user
Let’s do an example. Say you want to make the first line of a paragraph slightly bigger in font size, a common thing in typography:
p::first-line { font-size: 2rem; }
Or maybe you want the first letter to be bolder:
p::first-letter { font-weight: bolder; }
::after and ::before are a bit less intuitive. I remember using them when I had to add icons using CSS. You specify the content property to insert any kind of content after or before an element:
p::before { content: url(/myimage.png); } .myElement::before { content: "Hey Hey!"; }
Download the CSS Pseudo PDF Tutorial.