html - 如何将 "subhead"和 "description"文本放在括号内？

Question

CODEPEN

我假设这与我的定位有关(我仍在努力了解哪个最适合特定元素)。我还希望括号保持在列范围内，以防用户打开较窄的窗口。

HTML

<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

你可以试试这段代码，使用 before/after 元素:

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