Naked Brutalist HTML Page Leaks Its Own Markup

A new page from secretGeek.net turns brutalist minimalism into a clever demonstration of CSS power. The HTML markup is rendered directly as visible content on the page, making the source code double as the display — no hidden rendering, just raw tags shown for what they are.

The trick relies on a handful of CSS rules that flatten the document structure while preserving inline elements:

  • All elements become block-level via * { display:block; }
  • Anchors, code, em, and strong stay inline with a,code,em,strong {display:inline}
  • The ::before and ::after pseudo-elements display the actual tag names as content, e.g. p::before { content: '<p>'}

The page closes with a snippet borrowed from Josh Li's "58 bytes of css to look great nearly everywhere", a fitting capstone for such a stripped-down exercise in CSS trickery:

html {
  max-width: 70ch;
  padding: 2ch;
  margin: auto;
  color: #333;
  font-size: 1.2em;
}

Direct Link →