Planos a partir de R$ 32/mês Inscreva-se Agora

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

Código | 7.413 | 26 de setembro de 2014

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.

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

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.

Mais Dicas

CSS – Box Shadow

Como adicionar uma barra de loading igual a do YouTube com JavaScript

Para que serve o Clearfix

Como animar ao Scroll com jQuery

Dica #09 Tipografia – Góticas