html - CSS 中的尾线装饰标题

Question

我正在尝试创建带有一些花哨装饰的 header 标签。

最终，我想达到这个目的:

不过，我在文本后添加尾部装饰时遇到了问题。

我最初的想法是有一个容器，然后在那个容器中是 h1 和一个包含该行的 span 标签。但我似乎不太能让这条线与上面的文字居中。

我试过:

.container {
    width: 100%;
}

h1 {
   display: inline;
   position: relative;
   z-index: 2;
}

span {
    display: inline-block;
    height: 50%;
    width: 100%;
    border-bottom: 1px solid red;
}

和 HTML

<div class="container">
    <h1>Test</h1>
    <span></span>
</div>

但是运气不好。任何人都知道任何可以帮助我实现这一目标的技巧吗？最主要的是文本的长度和高度是可变的，所以我试图让这条线占据框的剩余部分并正好位于中间。

我也尝试过 display: table-cell 但没有成功...

Answer 1

你需要这样的东西

html - <h2>Test</h2>

CSS

h2{
    position:relative;
    overflow:hidden;
}
h2:after {
    content:"";
    top:48%;
    width:100%;
    margin-left:10px;
    height:5px;
    position:absolute;
    background:orange;
}