我使用此 CSS 從標(biāo)題文字的末尾到容器的末尾繪製一條線：
h1 {
display: flex;
}
h1::after {
content: "";
flex: auto;
border-bottom: 3px solid #08A7FC;
margin-bottom: 0.25em;
}
在標(biāo)題文字長(zhǎng)於一行之前，這種方法效果很好，因?yàn)檫@樣 h1 就會(huì)佔(zhàn)據(jù)容器的整個(gè)寬度。還有其他解決方案可以實(shí)現(xiàn)這一目標(biāo)嗎？我已經(jīng)嘗試了在標(biāo)題標(biāo)記末尾添加一條長(zhǎng)黑線的所有方法，但沒有任何效果。要嘛這條線出現(xiàn)在不該出現(xiàn)的地方，要嘛根本沒有這條線。
1
0
0
所以，在寫這個(gè)問題的過程中我已經(jīng)找到了解決方案。我修改了 新增一個(gè)已接受的答案標(biāo)題標(biāo)記末尾的長(zhǎng)黑線，透過將「頂部」替換為「底部」
h1::after {
background: #08A7FC;
content: "";
display: inline-block;
height: 3px;
position: absolute;
bottom: 0.25em;
width: 100%;
}
h1 {
overflow: hidden;
position: relative;
}
