2025-03-29

Styling <head> elements

A bit of fooling around. I started wondering if it's possible to style <head> and it's elements. It turns out you can! I managed to quickly remake <title> into a top bar. :D

You need to give display: block to <head> and then other elements inside too.

head {
    display: block;
}
title {
    background-color: gainsboro;
    display: block;
    padding: 2rem;
    text-align: center;
}

Most of the elements don't have content, but this can be averted with before:

meta {
    display: block;
    padding: 0.5rem;
}
meta::before {
    content: attr(name) ": " attr(content);
}

I can't think of many practical use cases for this, but who knows. This one time, I might need it.