Summary - Decorative heading

Build decorative heading ornaments with pseudo-elements.

Four pseudo-elements, one heading

In this group you learned four pseudo-elements: ::before and ::after add boxes before and after content; ::first-letter enlarges the leading letter; ::selection colors highlighted text; ::placeholder styles the input hint.

The common thread is the content property: required for ::before and ::after, irrelevant for the rest. Now you will combine these pseudo-elements to build a decorative heading.

Exercise Add the decorative square with ::before

Add a ::before pseudo-element to the h1 type selector. Inside, set content: "", display: inline-block, width: 1rem, and background: navy. This places a small navy square ornament before the heading.

Show example solution

/* add ::before for the decorative square */
h1::before {
  content: "";
  display: inline-block;
  width: 1rem;
  background: navy;
}

Exercise Enlarge the first letter and color the selection

Add two more pseudo-elements. First h1::first-letter with color: navy and font-size: 2rem. Second ::selection with background: navy and color: white. This enlarges the heading's first letter and turns selected text navy.

Show example solution

/* first letter and selection styles */
h1::first-letter {
  color: navy;
  font-size: 2rem;
}
::selection {
  background: navy;
  color: white;
}

Test yourself

Which of these is a pseudo-element?
- .heading
- #main
- ::after
- a[href]
Show answer

::after — Correct. The double colon (::) marks a pseudo-element.

Write the h1::before block

h1____ {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: navy;
}

Show answer

h1::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: navy;
}

Next lesson: Sibling combinators (+ and ~)

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies