带有线条的标题填充两侧的剩余空间

Question

我被要求创建这个标题，纯粹用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;
    }
}

左侧很容易，但是我被困在右侧。

https://jsfiddle.net/kab5qtbb/

我似乎无法弄清楚如何只使正确的线填充容器右侧的剩余空间。

Answer 1

您可以使用margin-right:-100%; 和vertical-align:middle; on :after伪元素。 （基于这个答案： 文本和透明背景下的行分隔符 ）：

 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。

Answer 2

如果你对绝对定位不太感兴趣，你可以做到

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

将需要调整，但在jsfiddle这将获得你需要的东西

Answer 3

这是使用display: table;解决方案display: table;
并display: table-cell;

在标题内容之后，侧面的线条会增长和缩小。

 .headline { display: table; line-height: 3px; white-space: nowrap; } .headline:before { width: 20%; height: 2px; margin-top: 20px; border-right: 10px solid transparent; } .headline:after { width: 80%; border-left: 10px solid transparent; } .headline:before, .headline:after { content: ''; display: table-cell; border-top: 1px solid black; border-bottom: 1px solid black; } 

 <h2 class="headline"> Headline </h2> <h2 class="headline"> Headline thats longerrrrrrrrrrrrrrrrr </h2> 

Answer 4

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

HTML是： -

您还需要添加背景图像或使用css3-gradient。

Answer 5

这就是我用的:)

https://jsfiddle.net/v7gze6ox/2/

 fieldset { border: 0px; border-top: 3px solid red; display: block; padding-left: 25px; padding-right: 25px; width: 100%; } fieldset h2 { margin: 10px; color: white; } .bg { background: url("http://images.all-free-download.com/images/graphiclarge/abstract_vector_green_background_277778.jpg"); } 

 <div class="bg"> <fieldset> <legend align="right"> <h2>Text</h2> </legend> </fieldset> </div>