Creating What Doesn't Exist in HTML

Pseudo-elements allow styling specific parts of an element or inserting decorative content.

1. Content: ::before and ::after

They create " virtual sub-elements " at the very beginning or end of tag content.

• Important: Always require the content: ""; property (even if empty), otherwise they won't appear.

.link-external::after {
  content: "↗";
  margin-left: 5px;
  font-size: 0.8em;
}

2. Text: ::first-letter and ::first-line

Allow creating beautiful drop caps (huge first letter) or highlighting the first line of an article.

.article-text::first-letter {
  font-size: 3em;
  float: left;
  margin-right: 8px;
  color: var(--primary);
}

3. Selection: ::selection

Allows changing background and text color when user highlights content with mouse. A great way to add branding to a site.

::selection {
  background: var(--brand-yellow);
  color: #000;
}