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

如何使用:after等css伪元素？

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;
}

<强> DEMO