Pseudo-elements :after e :before para estilizar títulos

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.