具有填充两侧剩余空间的线的标题 [英] Title with lines filling remaining space on both sides

问题描述

我被要求创建此标题，纯粹使用CSS，甚至可能吗？

I've been asked to create this title, purely with css, Is it even possible?

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

The background of the text needs to remain transparent, the h2 needs to span the width of any container and have the left and right borders fill automatically the remaining space.

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

左侧很容易，

https://jsfiddle.net / kab5qtbb /

我似乎不知道如何只使正确的行填充容器右侧的剩余空间。 p>

I can't seem to figure out how to only make the right line fill the remaining space on the right of the container.

推荐答案

您可以使用 margin-right：-100％; 和<$在：之后伪元素的 vertical-align：middle; （基于此答案：文本和透明背景下的行分隔符）：

You can use margin-right:-100%; and vertical-align:middle; on the :after pseudo element. (Based on this answer: Line separator under text and transparent background) :

h2 {
  font-size: 42px;
  line-height: 48px;
  width: 100%;
  overflow: hidden;
}
h2:before, h2:after {
  content: '';
  display: inline-block;
  vertical-align:middle;
  width:50px;
  height:3px;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}
h2:after {
  width:100%;
  margin-right: -100%;
}

/**** FOR THE DEMO ***/
body{background-image: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-repeat:no-repeat;background-size:cover;color:#fff;}

<h2>HEALTH BENEFITS</h2>
<h2>HEALTH</h2>

请注意，我也简化了您的CSS。

这篇关于具有填充两侧剩余空间的线的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！