html - CSS中的尾随行装饰标题

Question

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

最终，我想达到这个：

我在文本之后添加尾行装饰时遇到了麻烦。

我最初的想法是有一个容器，然后在那个容器中是 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;
}

Answer 2

使用css伪元素怎么样:after？

HTML

<div class="foo">INSIGHT</div>

CSS

.foo {
    position: relative;
    color: orange;
    overflow: hidden;
}
.foo:after {
    content: "";
    position: absolute;
    width: 90%;
    top: 50%;
    margin-left: 10%;
    border-top: 3px solid orange;
}

演示