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