Can someone help me figure out how to add horizontal lines behind the words in this header? Here is what I have so far: https://i.sstatic.net/dN7s4.jpg. However, I want to achieve something similar to this design: https://i.sstatic.net/FZoSF.jpg. You can view my progress on JSFiddle here: https://jsfiddle.net/n2tst0b1/
Here is a snippet of the 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 -->
This is an excerpt from the 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; }