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

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

您可以在"urn:x-local:objective_1"伪元素上使用margin-right:-100%;和vertical-align:middle;。 （根据这个答案：Line separator under text and transparent background）：

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

请注意，我还简化了您的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-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/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;