H1 Title Personalizado com CSS ::after Selector

Neste artigo vamos deixar o h1, h2 e h3 com estilo diferente com css.

utilizaremos aqui o pseudo-elemento ::after que é o último filho do elemento selecionado.

Vamos adicionar o Html:

<div class="title">
    <h1><span>Front</span> End</h1>
</div>

<div class="title">
    <h2><span class="icon icon-code"></span> Html</h2>
</div>

Vamos adicionar Css:

.title { 

  border-bottom:1px solid #eaeaea; 
  margin-bottom:40px; 
  padding-bottom:0; 

}

/*Se quiser centralizar o texto add a class centraliza */
.title.centraliza { text-align:center; }

.title h1, .title h2, .title h3 { 

	display:inline-block; 
	font-family:'open_sansbold'; 
	font-size:1.5em; 
	color:#00bec5; 
	margin-top:0; 
	margin-bottom:0;
}

.title span, .title span, .title span { 

	display:inline-block; 
	font-family:'open_sansregular';  
	color:#00bec5; 
	margin-top:0; 
	margin-bottom:0;
}

.title span::after, .title span::after, .title span::after {

    content:'';
    display: block;
    position: relative;
    top: 5px;
    width: 100%;
    height: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-image: -webkit-linear-gradient(left,#00d8e0 0,#028085 100%);
    background-image: -o-linear-gradient(left,#00d8e0 0,#028085 100%);
    background-image: linear-gradient(to right,#00d8e0 0,#028085 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d8e0', endColorstr='#028085', GradientType=1);
}

Baixar Código Veja Funcionando