如何为部分添加背景色

Question

代码：

.headline {
  font: 150 50px/0.8 'Pacifico', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1), 7px 7px 0px rgba(0, 0, 0, 0.05);
  text-align: center;
}

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<div class="main">
  <nav class="nav-bar">
    <ul>
      <li><a href="#"> Profile </a></li>
      <li><a href="#"> Notifications </a></li>
      <li><a href="#"> Messages </a></li>
      <li><a href="#"> Logout </a></li>
    </ul>
  </nav>
</div>
<div class="headline">

  <p>
    The Social Network
  </p>
</div>
<br>
<hr>
<br>
<br>

在这里，我要显示与导航栏中相同的颜色，直到社交网络下方的水平线为止。 我已经给出了上面的html代码。 请提出一种解决方法。

Answer 1

只需添加背景颜色：; 标题样式