.hr {
    /* centre verticalement les enfants entre eux */
    align-items: center;
    width:80%;
    color:#00CCFF;
    /* 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;*/
    border-top: 4px double #00CCFF;

    /* 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: 2px;

    /* espace les traits du texte */
    margin: 10px;
}