Fügen Sie eine Zeile vom Ende des Titeltextes bis zum Ende des Containers hinzu

Question

Ich verwende dieses CSS, um eine Linie vom Ende des Titeltextes bis zum Ende des Containers zu zeichnen:

h1 {
  display: flex;
}

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

Das funktioniert gut, bis der Titeltext länger als eine Zeile ist, denn dann nimmt h1 die gesamte Breite des Containers ein. Gibt es andere Lösungen, um dies zu erreichen? Ich habe alles versucht, um am Ende des Titel-Tags eine lange schwarze Linie hinzuzufügen, aber nichts funktioniert. Entweder ist die Linie irgendwo, wo sie nicht sein sollte, oder es gibt überhaupt keine Linie.

P粉165522886 · Answer

所以，在写这个问题的过程中我已经找到了解决方案。我修改了添加一个已接受的答案标题标记末尾的长黑线，通过将“顶部”替换为“底部”

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