A Pseudo-Element in CSS is used for specific parts of an element, parts that are not directly in your HTML/PHP code.
For example, it can be used to:
The Pseudo-Elements we will talk about are: first-line (first line), first-letter (first-letter), before (before), after (after), marker (marker) and selection (selection).
The first-line “generally” is used to change the entire first line of a text, and can be used like this:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
The first-letter we use to change the entire first letter of a text or title, and can be used like this:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
The before pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento. O exemplo a seguir insere uma imagem antes do conteúdo de cada elemento <h1>:
h1::before {
content: url(smiley.gif);
}
The after pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento. O exemplo a seguir insere uma imagem antes do conteúdo de cada elemento <h1>:
h1::after {
content: url(smiley.gif);
}
The marker selects bullets from list items. The following example styles bullets for list items:
::marker {
color: red;
font-size: 23px;
}
The selection corresponds to the part of an element that is selected by a user. The following example makes selected text red on a yellow background:
::selection {
color: red;
background: yellow;
}
w3schools.com. CSS Pseudo-elements. Available in: https://www.w3schools.com/css/css_pseudo_elements.asp