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

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

您可以在:after 伪元素上使用margin-right:-100%; 和vertical-align:middle;。 （基于此答案：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。

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

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>