Centrer du texte dans un <hr>

Comment intègreriez-vous le visuel suivant ?

Le trait horizontal nous rappelle probablement l’élément <hr>, après tout il signifie horizontal rule qui se traduit par… trait horizontal ! Mais il ne peut pas être utilisé pour deux raisons :

• Son modèle de contenu est « rien », ce qui veut dire qu’il ne peut contenir ni texte, ni élément.
• Il possède sa propre sémantique : une césure thématique entre deux paragraphes.

Notre visuel évoque plutôt un titre de niveau un. Le HTML approprié serait donc

<h1 class="hr">Chapitre un</h1>

Ainsi le style ne dépend que de la classe hr. Nous allons utiliser les pseudo-éléments ::before et ::after pour tracer les deux parties du trait. Il faudra ensuite faire en sorte que ces derniers se partagent la largeur restante tout en étant verticalement centrés par rapport au texte. Tout ceci, flexbox le permet !

.hr {
    /* centre verticalement les enfants entre eux */
    align-items: center;

    /* active flexbox */
    display: flex;

    /* garde le texte centré s’il passe sur plusieurs lignes ou si flexbox n’est pas supporté */
    text-align: center;
}

.hr::before,
.hr::after {
    /* remplir le fond du trait permet également d’utiliser des images ou dégradés ! */
    background: currentColor;

    /* nécessaire pour afficher les pseudo-éléments */
    content: "";

    /* partage le reste de la largeur disponible */
    flex: 1;

    /* l’unité « em » garantit un ratio constant avec la taille du texte */
    height: .025em;

    /* espace les traits du texte */
    margin: 0 .5em;
}

Cette solution est simple, robuste, se dégrade gracieusement et bénéficie d’un excellent support. Faites vous une faveur et utilisez la !