CSS Pseudo Elementos: First-Letter, First-Line, Before e After
Os pseudo elementos servem para modificar algumas partes do documento que não ficam na árvore do documento.
Se você quer saber como utilizar um pseudo elemento, é como utilizar uma pseudo classe, acesse Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.
Pseudo Elemento First-Letter
O pseudo elemento first-letter é utilizado para colocar na primeira letra do elemento um estilo especificado. Exemplo:
<style type="text/css">
.fletter:first-letter {
font-size: 30px;
}
</style>
<div class="fletter">Primeira letra vai ser maior que a outras.</div>
Nesse exemplo a primeira letra do texto dentro do <div> terá o tamanho de 30 pixels. Você pode ver esse exemplo funcionando em Pseudo Elemento – First-Letter e First-Line.
O pseudo elemento first-letter somente funciona com elementos de bloco e também somente funcionam alguns estilos, como: propriedades de fonte, propriedades de cor, propriedades de fundo (background), propriedades de margens, propriedades de padding (sabe lá como se traduz isso), propriedades de bordas, text-decoration, vertical-align (se o estilo for float: none), text-transform, line-height, float e clear.
Pseudo Elemento First-Line
O pseudo elemento first-line é utilizado para colocar na primeira linha do elemento um estilo especificado. Exemplo:
<style type="text/css">
.fline {
width: 200px;
}
.fline:first-line {
font-size: 30px;
}
</style>
<div class="fline">Primeira linha vai ser maior que a outras.</div>
No exemplo acima, a primeira linha do texto dentro do <div> terá o tamanho de 30 pixels. Você pode ver esse exemplo funcionando em Pseudo Elemento – First-Letter e First-Line.
O pseudo elemento first-line funciona somente em elementos de bloco e com os mesmos estilos especificados na parte do first-letter.
Pseudo Elemento Before
O pseudo elemento before adiciona algum conteúdo antes do elemento ao qual ele é definido. Exemplo:
<style type="text/css">
.clabef:before {
content: 'P: ';
}
</style>
<div class="clabef">Antes de qualquer conteúdo do elemento entra o que tem no before.</div>
<div class="clabef">Antes de qualquer conteúdo do elemento entra o que tem no before.</div>
<div class="clabef">Antes de qualquer conteúdo do elemento entra o que tem no before.</div>
Nesse exemplo vai sempre haver um “P: “ antes do conteúdo de cada <div>. Você pode ver esse exemplo funcionando em Pseudo Elemento – Before e After.
Pseudo Elemento After
O pseudo elemento after adiciona algum conteúdo depois do elemento ao qual ele é definido. Exemplo:
<style type="text/css">
.claaft:after {
content: '.';
}
</style>
<div class="claaft">Depois de qualquer conteúdo do elemento entra o que tem no after</div>
<div class="claaft">Depois de qualquer conteúdo do elemento entra o que tem no after</div>
<div class="claaft">Depois de qualquer conteúdo do elemento entra o que tem no after</div>
Nesse exemplo vai sempre haver um “.” depois do conteúdo de cada <div>. Você pode ver esse exemplo funcionando em Pseudo Elemento – Before e After.