First letter and line
::first-letter (:first-letter)
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
::first-line (:first-line)
The ::first-line CSS pseudo-element applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text.
Generated content with ::before and ::after
Generated content is content that browsers generate on the fly (like bullet points on lists).
::before (:before)
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
/* Add a heart before links */
a::before {
content: "♥";
color: red;
}
::after (:after)
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
/* Add an arrow after links */
a::after {
content: "→";
color: red;
}
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements