css 从标题文本结尾到容器结尾添加一行

pjngdqdw 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(104)

我使用这个CSS从标题文本的结尾到容器的结尾画一条线：

h1 {
  display: flex;
}

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

在头文本超过一行之前，这都很有效，因为h1占据了容器的整个宽度。是否有其他解决方案来实现这一点？我已经尝试了Add a long black line at the end of a header tag中的所有方法，但都不起作用。要么这条线在它不应该在的地方，要么根本就没有这条线。

css

来源：https://stackoverflow.com/questions/76262335/add-a-line-from-end-of-header-text-to-end-of-container

1条答案

按热度按时间

kq0g1dla1#

所以，在写这个问题的时候，我已经找到了答案。我修改了Add a long black line at the end of a header tag的已接受答案，将“top”替换为“bottom

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

赞(0）回复(0）举报 2023-05-19

我来回答

css 从标题文本结尾到容器结尾添加一行

1条答案

相关问题

热门标签

最新问答