CSS多层标头

Question

我正在尝试创建此标头：http://imgur.com/a/GNC7x 我到目前为止：http://imgur.com/a/N8M4F我不知道如何在单词后面左右两侧获得水平线。这是我到目前为止的jsfiddle： https://jsfiddle.net/n2tst0b1/

HTML：

<div id=page-wrap>
<div class="usabackgroundheader">
    USA
    <div id='headerfront'>
        <i class="fa fa-star star-color" aria-hidden="true"></i>
        <i class="fa fa-star star-color" aria-hidden="true"></i>
            Church Army USA
        <i class="fa fa-star star-color" aria-hidden="true"></i>
        <i class="fa fa-star star-color" aria-hidden="true"></i>
        </div><!--end id headerfront-->
    </div> <!--end class usabackgroundheader -->
</div><!--end div pagewrap -->

CSS：

.usabackgroundheader {
  font-size: 90px;
  color: #F3F1EF;
  position: relative; }

  #headerfront {
  color: #25408F;
  font-size: 18px;
  line-height: 20px;
  position: absolute;
  top: 30%;
  left: 38%;
  text-align: center;
  vertical-align: middle; }

  #page-wrap {
  width: 960px;
  margin: 0 auto;
  position: relative;
  text-align: center; }

Answer 1

Ok , i guess you want something like this :

*,html,body{
     margin: 0;
     padding: 0;
           }
body,html{
	height: 100%;
      font-family: robotoregular;
      background-color: #e0e0e0;
}
.content{
  background-color:white;
  width:100%;
  height:98%;
  margin-top:2%;
  position:relative;
}
.header-text{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  opacity:0.1;
  font-size:80px;
  text-align:center;
}

.first-header{
  border:2px solid #e0e0e0;
  width:350px;
  padding:3px;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  border-radius:10px;
  
}

<div class="content">
<h1 class="header-text">
USA
</h1>
<div class="first-header">
<h2 style="text-align: center">
** Church army **
</h2>
<div class="line">
</div>
</div>
</div>

you can play with the style for the color and for the last line i show you how

in this demo and you complete , you can also use the flex box it's more flexible

hope it helps.