UNIT 18 • STAGE 6 OF 7
My Research
New CSS: counter-reset, counter-increment, and ::before with content: counter(), auto-numbered prompts without hardcoded numbers.
My Research: How This Section Works
This section is where you publish your own writing. The structure is already built. Your job is to replace the placeholder text with your actual research after you complete this stage.
The section has two parts: a set of research prompts that guide your writing, and a writing area where your final text will live. The prompts are numbered 1 through 4. But you are not going to type those numbers in the HTML. CSS will generate them automatically.
The workflow
Write your research in Google Docs first using the four prompts as your outline. Then open your website and replace the placeholder content in the .mw-heading and .mw-body with your actual writing. Your website becomes the published form of your research.
New CSS: CSS Counters
CSS counters let you automatically number any set of elements using only CSS, no JavaScript, no hardcoded numbers in the HTML. Here is how they work:
- You declare a counter on a parent element using
counter-reset. This creates the counter and sets it to zero. - You tell each child element to increment the counter using
counter-increment. Each time the browser renders one of those elements, the counter goes up by one. - You display the current count in a
::beforepseudo-element usingcontent: counter(). The browser inserts the number automatically before the element's content.
If you add a new prompt item or remove one, the numbers update themselves. You never have to touch them.
counter-reset: prompt-counter; /* creates counter, starts at 0 */
display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px;
}
.prompt-item {
counter-increment: prompt-counter; /* adds 1 to counter each time */
background: var(--bg-card);
border: 1px solid var(--gold-border);
border-radius: 12px;
padding: 24px 28px;
display: grid;
grid-template-columns: 48px 1fr; /* number column + content column */
gap: 20px;
align-items: start;
}
.prompt-item::before {
content: counter(prompt-counter); /* inserts current count */
font-family: 'Playfair Display', Georgia, serif;
font-size: 2rem; font-weight: 900; line-height: 1;
color: var(--gold);
opacity: 0.5;
padding-top: 4px;
}
Where you will see this in practice
CSS counters are used in documentation sites for step-by-step guides, in legal documents for section numbering, in recipe sites for numbered instructions, and in any ordered list where the designer wants full visual control over how the number looks. They are far more flexible than a standard <ol> because you control the number's font, color, size, and position completely through CSS.
New CSS: Research Section and Writing Area
The research section alternates background from the courts section. The writing area where your research lives is a distinct styled block that signals "this is the student's published work, not the pre-written content."
.prompt-heading { font-size: 1rem; font-weight: 700; color: var(--text-light); margin-bottom: 6px; }
.prompt-text { font-size: 0.9375rem; line-height: 1.7; color: var(--text-dim); }
.my-writing {
background: var(--bg-card);
border: 1px solid var(--gold-border);
border-top: 3px solid var(--gold);
border-radius: 0 0 16px 16px;
padding: 48px 56px;
}
.mw-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 12px; }
.mw-heading { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.15; margin-bottom: 28px; }
.mw-body p { font-size: 1.0625rem; line-height: 1.85; color: var(--text-dim); margin-bottom: 1.25em; max-width: 72ch; }
.mw-body p:last-child { margin-bottom: 0; }
72ch, a typographic width unit
72ch limits the line length to approximately 72 characters. The ch unit equals the width of the "0" character in the current font. Typographers recommend 50–75 characters per line for comfortable reading. Using max-width: 72ch on body text is a professional typographic practice that makes long-form writing significantly easier to read.
Stage 6 Complete!
The research section is live. Look at the preview and verify that the four prompts are numbered automatically, 1, 2, 3, 4, without those numbers appearing anywhere in the HTML. The writing area below them shows the placeholder text you will replace with your research. Stage 7 is the final stage: Today.
© 2026 Relentless Feather. All rights reserved.