Mar 6, 2023

Create Axios-style articles with CSS

You can style heading elements to look like the axioms in Axios articles with CSS.

Step by step:

1. Start with the following HTML markup for this example:

   <article>
     <p>Paragraph 1</p>
     <h2>Why it matters</h2>
     <p>Paragraph 2 should be inline with the heading</p>
   </article>
   

2. Turning over to CSS, add stack styles the container element:

   article * + * {
     margin-block-start: 1.5rem;
   }
   

   This positions all of our block elements within an article with a consistent gap.

3. Move the h2 and following p elements onto the same line:

   article h2,
   article h2 + p {
     display: inline-block;
   }
   

   This positions those element correctly, but creates a problem. The block start margin of the h2 element isn’t collapsing with the block end margin of the first paragraph.

4. Remove block end margins for everything within our article:

   article * {
     margin-block-end: 0;
   }
   

5. Add a colon using a pseudo-element:

   article h2::after {
     content: ":";
   }
   

With those styles in place, we have a semantic and accessible Axios article.

Try it out:

See the Pen Axios-style articles with h2 headings by Sean McPherson (@SeanMcP) on CodePen.

Takeaway: This solution is better than Axios’ markup because it uses the heading hierarchy. They use strong elements which aren’t navigable by screenreaders.

---