從標題文字末尾到容器末尾添加一行
P粉321676640
P粉321676640 2023-09-15 19:42:56
0
1
472

我使用此 CSS 從標題文字的末尾到容器的末尾繪製一條線:

h1 {
  display: flex;
}

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

在標題文字長於一行之前,這種方法效果很好,因為這樣 h1 就會佔據容器的整個寬度。還有其他解決方案可以實現這一目標嗎?我已經嘗試了在標題標記末尾添加一條長黑線的所有方法,但沒有任何效果。要嘛這條線出現在不該出現的地方,要嘛根本沒有這條線。

P粉321676640
P粉321676640

全部回覆(1)
P粉165522886

所以,在寫這個問題的過程中我已經找到了解決方案。我修改了 新增一個已接受的答案標題標記末尾的長黑線,透過將「頂部」替換為「底部」

h1::after {
    background: #08A7FC;
    content: "";
    display: inline-block;
    height: 3px;    
    position: absolute;
    bottom: 0.25em;
    width: 100%;
}
h1 {
    overflow: hidden;
    position: relative;
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!