如何将“分目”和“描述”文本置于括号内？

Question

CODEPEN

我假设这与我的定位有关(我还在努力弄清楚哪一个是对特定元素最好的)。我还希望方括号保持在列的范围内，以防用户打开一个较窄的窗口。

<div class="col-md-4 col-md-offset-4">
  <div class="space margin-10">
    <div class="brackets">
      <h1 class="bracket-l">{</h1>
      <h1 class="bracket-r">}</h1>
      <h2 class="subhead align-center text-up size-1" id="title">HCM</h2>
      <p class="description align-center size-1">Uniting Organizations with HR Solutions that Help Drive Revenue | ADP.com</p>
    </div>
  </div>
</div>

CSS

.space {
  text-align: center;
  position: relative;
}

.bracket-l {
  font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;
  text-align: left;
  position: absolute;
}

.bracket-r {
  font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;
  text-align: right;
}

Answer 1

您可以使用“前”/“后”元素尝试此代码：

​

.content {
margin:0 auto;
padding:50px;
text-align:center;
position:relative;
}

.content:before {
position:absolute;
left:0;
top:0;
content:"{";
font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;

}
.content:after {
position:absolute;
right:0;
top:0;
content:"}";
font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;

}

<div class="content">
<h1>Some text</h1>
<h3>More text More text More text More text</h3>
</div>

​

Answer 2

这是小提琴：https://jsfiddle.net/ur7pyxof/2/

<div class="col-md-4 col-md-offset-4">
  <div class="space margin-10">
    <div class="brackets">
      <h1>
      <table>
      <tr>
        <td class="bracket-l">{</td>
        <td> <h2 class="subhead align-center text-up size-1" id="title">HCM</h2>
      <p class="description align-center size-1">Uniting Organizations with HR Solutions that Help Drive Revenue | ADP.com</p></td>
        <td class="bracket-l">}</td>
      </tr>
      </table>
      </h1>
    </div>
  </div>

​