A pseudo-class is used to define a special state of an element, while a pseudo-element is used to style specified parts of an element.

A pseudo-class can be used to:

• Style an element when a user moves the cursor over it (hover)
• Style visited and unvisited links differently as a visual cue to the user
• Style an element when it gets focus, such as a form field

Styling links:

a:link {
    color: green;
    text-decoration: none;
}
a:visited {
    color: darkgreen;
    text-decoration: none;
}
a:hover {
    color: red;
    text-decoration: underline;
}
a:active {
    color: orange;
    text-decoration: underline;
}

Styling form inputs:

input:focus {
    border: red solid thin;
}

A pseudo-element can be used to:

• Style the first letter or first line of an element
• Insert content before the content of an element
• Insert content after the content of an element

ul li::before {
    content: "added info before - ";
}

ul li::after {
    content: " - added info after";
}

---