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; }