Skip to main content

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:

      <p>Paragraph 1</p>
      <h2>Why it matters</h2>
      <p>Paragraph 2 should be inline with the heading</p>
  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.