Ajouter une ligne de la fin du texte du titre à la fin du conteneur

Question

J'utilise ce CSS pour tracer une ligne de la fin du texte du titre à la fin du conteneur :

h1 {
  display: flex;
}

h1::after {
  content: "";
  flex: auto;
  border-bottom: 3px solid #08A7FC;
  margin-bottom: 0.25em;
}

Cela fonctionne bien jusqu'à ce que le texte du titre soit plus long qu'une ligne, car alors le h1 occupe toute la largeur du conteneur. Existe-t-il d'autres solutions pour y parvenir ? J'ai tout essayé pour ajouter une longue ligne noire à la fin de la balise title mais rien n'y fait. Soit la ligne est quelque part où elle ne devrait pas être, soit il n’y a pas de ligne du tout.

Answer 1

Donc, en rédigeant cette question, j'ai trouvé la solution. J'ai modifié pour ajouter une longue ligne noire à la fin de la balise titre de la réponse acceptée, en remplaçant "top" par "bottom"

h1::after {
    background: #08A7FC;
    content: "";
    display: inline-block;
    height: 3px;    
    position: absolute;
    bottom: 0.25em;
    width: 100%;
}
h1 {
    overflow: hidden;
    position: relative;
}