Pseudo Elementos

Existem casos onde as tags que utilizamos para definir o nosso conteúdo não são o suficiente para estruturar os elementos de interface que desejamos. Seja para tratar problemas de float, definir bordas adicionais ou algo similar, muitas vezes acabamos dependendo de elementos vazios para resolver estes problemas. Por exemplo, ao trabalhar com bordas arredondadas sem o uso de CSS 3, coisas assim, onde o span é utilizado para criar as bordas do lado direito de um botão:

<div class=’button’>

<a href=’#’>Clique aqui</a>

<span></span>

</div>

Já foi muito comum utilizar soluções assim para trabalhar com sombras, bordas arredondadas, letras iniciais de títulos e outros detalhes de interface que não conseguimos criar apenas com o mínimo de código HTML. Mas existem alternativas bastante interessantes para isto, utilizando apenas CSS.

Os chamados pseudo elementos, que não existem no nosso código HTML, podem receber estilos específicos e auxiliar a estruturar elementos mais complexos nas nossas interfaces. Os mais tradicionais deles são os elementos ::before e ::after, que são inseridos antes e depois do conteúdo de uma tag (e não antes e depois da tag em si), e estão disponíveis para todas as tags que adicionarmos ao body da nossa página.

Vamos criar uma faixa que dá a ilusão de que ela contorna um section que o contém, e os elementos ::before e ::after irão fazer o trabalho pesado. Começamos com o mínimo de HTML necessário, uma tag section e um título para a faixa.

<section>

<h1>Um exemplo de pseudo elementos</h1>

</section>

Vamos adicionar um pouco de CSS para definir a largura do section e a posição do título.

section {

border: 1px solid #000;

height: 100px;

margin: 40px auto;

width: 400px;

}

h1 {

font-size: 1.2em;

text-align: center;

}

Vamos começar a transformar o nosso h1 na faixa que queremos criar. Além da cor, vamos posicionar as laterais da faixa para fora da seção:

h1 {

background-color: #990000;

color: #FFF;

font-size: 1.2em;

left: -10px;

padding: 5px 0;

position: relative;

text-align: center;

width: 420px;

}

Agora, temos 10px de cada lado da faixa vazando pela seção, só precisamos criar o efeito da faixa contornando o section, utilizando pseudo elementos. Primeiro, vamos criar este efeito para o lado esquerdo da faixa, utilizando o ::before:

h1::before {

border: 5px solid #7C0000;

content: “”;

left: 0;

position: absolute;

top: -10px;

}

Fazemos referência ao before utilizando a mesma sintaxe de pseudo classes que utilizamos para links, com o caractere “:” separando os elementos.

Utilizando o position junto de coordenadas exatas com as propriedades % left e top, conseguimos posicionar o elemento exatamente no canto superior esquerdo da faixa e com uma borda de 5px, desenhamos um quadrado de 10px.

A propriedade content é utilizada para definir o conteúdo do elemento – já que não estamos adicionando o elemento pelo HTML – e neste caso não precisamos de conteúdo algum. Para conseguir o efeito que queremos, precisamos transformar o quadrado que criamos em um triângulo, só precisamos de um ajuste nas cores das bordas:

h1::before {

border-color: transparent #7C0000 #7C0000 transparent;

border-style: solid;

border-width: 5px;

content: “”;

left: 0;

position: absolute;

top: -10px;

}

Trocando algumas das cores para transparent, conseguimos desenhar um tri- ângulo no lugar do quadrado vermelho. Para duplicar este efeito no outro lado da faixa, utilizando o ::after, só precisamos inverter alguns detalhes – o que era feita com a propriedade left será feito com a right, e as posições da lista de cores também precisa ser modificada, desta forma:

h1::after {

border-color: transparent transparent #7C0000 #7C0000;

border-style: solid;

border-width: 5px;

content: “”;

position: absolute;

right: 0;

top: -10px;

}

Com isso criamos o efeito da faixa contornando a seção, sem precisar de novos elementos no HTML.

É comum vermos uso dos pseudo elementos before e after em duas formas diferentes: prefixada com dois pontos (:before) ou quatro pontos (::before). Ambas podem ser utilizadas e têm a mesma função.

4

Source: scriptcase / Pseudo Elementos

Comments

comments

Greg

Old school developer with a passion for food, bikes and a whole lot of weird things.

Leave a Reply

Your email address will not be published.