Horizontal Lines Before and After Texts (CSS Tutorial)

This Video is going to show you CSS Tricks: Horizontal Lines Before and After Texts (Quick Tutorial) Horizontal Line After Text.

Code

<h1>We are Awesome</h1>

h1{
font-family: sans-serif;
margin: 100px auto;
text-align: center;
font-size: 40px;
max-width: 600px;
position:relative;

}
h1:before{
content: "";
display:block;
width: 120px;
height:2px;
background: #000;
position: absolute;
left: 0;
top: 50%;
z-index: -2;
}
h1:after{
content: "";
display:block;
width: 120px;
height:2px;
background: #000;
position: absolute;
right: 0;
top: 50%;
z-index: -2;
}
span{
background: #fff
}