A sintax do :after e :before
Utilizar linhas para compor um título pode fazer toda a diferença. E você não precisa criar elementos no HTML para adicionar essas linhas, basta utilizar as pseudo-classes :before ou :after do CSS
Abaixo temos um exemplo de título estilizado com linhas acima e abaixo do mesmo.
Para alcançar o resultado bastam poucas linhas de CSS e nenhuma adição de elementos HTML.
CSS
h2 {
color: #6d2db0;
font-size: 2em;
text-align: center;
}
h2:after, h2:before {
content: '';
display: block;
width: 80px;
height: 3px;
background: #6d2db0;
margin: 0 auto;
}
A única propriedade que pode confundir um pouco é a content. No caso temos que criar a mesma e atribuir um valor qualquer (no exemplo um valor nulo foi atribuído), para que o elemento seja criado dentro do HTML.