When should I use a pseudo-class instead of a pseudo-element?

Ask what you are trying to select. A pseudo-class matches an element because of its state or position in the document—for example, a link while it is hovered, or an item that is first among its siblings. A pseudo-element targets a particular part of an element or the render tree, or creates generated content. [S1]

So, use :hover to style a link when it is hovered. Use ::first-line to style the first line of an element’s text. The colon count is a useful clue in these examples, but the deciding question is whether you mean the element’s state or position, or a part or generated content. [S1]

In this list example, :first-child selects a list item because of its position. In the link example, :hover selects the link because of its state. Both selectors style the qualifying elements:

li:first-child {
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

Compare those with ::first-line, which targets a part of an element, not an element selected for its place in a list or its current state. That distinction is the useful one when deciding between the two forms. [S1]

No: a pseudo-class selects an element according to its state or position; it does not create a label. A pseudo-element such as ::before can generate content before an element’s content. [S1] For a deliberately decorative label, you could write:

.new-heading::before {
  content: "New";
  margin-right: 0.5em;
  font-weight: bold;
}

This example assumes the heading already has the new-heading class. Generated content is not ordinary authored HTML markup, so don’t rely on it for meaningful text that readers need to understand. Consider accessibility when using generated content. [S1] If “New” communicates important information, put that text in the page’s actual content instead.

Name the thing you intend to match. If your answer is “the element when it is in a certain state” or “the element in a certain position,” try a pseudo-class, such as :hover or :first-child. If your answer is “this particular part of the element” or “generated content before or after it,” try a pseudo-element, such as ::first-line or ::before. [S1]

Then check the effect: does your rule style the qualifying element, or a part or content associated with it? If it is meaningful text rather than decoration, use actual page content instead of relying on generated content. [S1]