Tambahkan baris dari hujung teks tajuk ke hujung bekas

Question

Saya menggunakan CSS ini untuk melukis garisan dari hujung teks tajuk hingga hujung bekas:

h1 {
  display: flex;
}

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

Ini berfungsi dengan baik sehingga teks tajuk lebih panjang daripada satu baris, kerana kemudian h1 mengambil keseluruhan lebar bekas. Adakah terdapat sebarang penyelesaian lain untuk mencapai ini? Saya telah mencuba segala-galanya untuk menambah garis hitam yang panjang pada penghujung tag tajuk tetapi tiada apa yang berjaya. Sama ada talian itu berada di tempat yang tidak sepatutnya, atau tiada garisan langsung.

Answer 1

Jadi, dalam proses menulis soalan ini saya telah menemui penyelesaiannya. Saya mengubah suai untuk menambah garis hitam panjang di hujung tag tajuk jawapan yang diterima, dengan menggantikan "atas" dengan "bawah"

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