Html 标题两边用线条填充剩余空间

我被要求创建这个标题，纯用css，这是可能的吗

文本的背景需要保持透明，h2需要跨越任何容器的宽度，并使左右边框自动填充剩余空间

h2 {
    font-size:42px;
    line-height:48px;
    width:100%;
    overflow: hidden;
    &:before {
        content:'';
        position:relative;
        padding-left:50px;
        padding-right:10px;
        margin-right:10px;
        margin-bottom:10px;
        background:red;
        height:3px;
        display:inline-block;
    }
    &:after {
        content:'';
        margin-left:10px;
        width:100%;
        background:red;
        height:3px;
        display:inline-block;
    }
}

左边很容易，但我被困在右边

---

我似乎不知道如何只让右行填充容器右侧的剩余空间。

如果您对绝对定位不太在意，您可以这样做

    h2 {
    font-size:42px;
    line-height:48px;
    width:100%;
    overflow: hidden;
    &:before {
        content:'';
        position:relative;
        padding-left:50px;
        padding-right:10px;
        margin-right:10px;
        margin-bottom:10px;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
        height:3px;
        display:inline-block;
    }
    &:after {
        content:'';
        margin-left:10px;
        width:50%;
        height:3px;
        position:absolute;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
        top:60px;
        }
}

---

将需要调整，但在JSFIDLE中，这会得到您需要的

您可以使用

右边距：-100%和
垂直对齐：中间上的code>：在伪元素之后。（根据这个答案：）：


h2{
字体大小：42px；
线高：48px；
宽度：100%；
溢出：隐藏；
}
h2:之前，h2:之后{
内容：''；
显示：内联块；
垂直对齐：中间对齐；
宽度：50px；
高度：3倍；
边框顶部：1px实心#fff；
边框底部：1px实心#fff；
}
h2：之后{
宽度：100%；
保证金权利：-100%；
}
/****为了演示***/
正文{背景图像：url（'https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg“）；背景重复：不重复；背景大小：封面；颜色：#fff；}
健康福利
健康状况

氢{
背景图片：url（\.给出url…）；
字体大小：42px；
线高：48px；
宽度：100%；
溢出：隐藏；
}
h2：之前{
内容：''；
位置：相对位置；
左侧填充：50px；
右边填充：10px；
右边距：10px；
边缘底部：10px；
背景：红色；
高度：3倍；
显示：内联块；
}
h2：之后{
内容：''；
保证金权利：-100%；
宽度：100%；
背景：红色；
高度：3倍；
显示：内联块；
垂直对齐：中间对齐；
}

html是：-
您还需要添加背景图像或使用css3渐变。
这就是我使用的：）



字段集{
边界：0px；
边框顶部：3件纯红；
显示：块；
左侧填充：25px；
右边填充：25px；
宽度：100%；
}
字段集h2{
利润率：10px；
颜色：白色；
}
.bg{
背景：url（“http://images.all-free-download.com/images/graphiclarge/abstract_vector_green_background_277778.jpg");
}

正文
以下是使用
显示的解决方案：表格

和
显示：表格单元格

边上的线条在标题内容之后会增长和收缩


.headline{
显示：表格；
线高：3倍；
空白：nowrap；
}
.标题：之前{
宽度：20%；
高度：2倍；
边缘顶部：20px；
右边框：10px实心透明；
}
.标题：之后{
宽度：80%；
左边框：10px实心透明；
}
.标题：之前，
.标题：之后{
内容：''；
显示：表格单元格；
边框顶部：1件纯黑；
边框底部：1px纯黑；
}

大字标题
长长的标题
这将提供水平滚动，并且只适用于正确长度的文本，正如我所说，如果你不担心绝对定位，它需要调整以实现。这不是很有帮助，因为它需要另外两个元素才能工作，但无论如何还是要感谢，可能是因为图像链接已关闭，字体颜色为白色。@TimKrul thx报告了此问题，我更改了图像。希望它现在能起作用
      <style type="text/css">
            h2 {
              background-image:url(\.give url....);
              font-size: 42px;
              line-height: 48px;
              width: 100%;
              overflow: hidden;
            }
            h2:before {
              content: '';
              position: relative;
              padding-left: 50px;
              padding-right: 10px;
              margin-right: 10px;
              margin-bottom: 10px;
              background: red;
              height: 3px;
              display: inline-block;
            }
            h2:after {
              content: '';
              margin-right: -100%;
              width: 100%;
              background: red;
              height: 3px;
              display: inline-block;
              vertical-align:middle;
            }
    </style>