11. What is a Pseudo element? What is pseudo-class?

Pseudo-classes select regular elements but under certain conditions like when the user is hovering over the link.

:link
:visited
:hover
:active
:focus
Example of the pseudo-class, In the below example, the color applies to the anchor tag when it’s hovered.

/* mouse over link */
a:hover {
color: #FFOOFF;
}
A pseudo-element however allows us to create items that do not normally exist in the document tree, for example ::after.

::before
::after
::first-letter
::first-line
::selection
In the below example, the color will appear only on the first line of the paragraph.

p: :first-line {
color: #ffOOOO;
font-variant: small-caps;
}