{{ CSSRef() }}
:before cria um pseudo-elemento que é a primeira criança do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento. Este elemento é inline por padrão.
{{ fx_minversion_note("3.5", "A versão do Firefox anterior à 3.5 somente tinha implementada a propriedade :before do CSS 2.0. Não foram permitidas position, float, list-style-* e algumas propriedades de exibição. O Firefox 3.5 removeu estas restrições. Note que isto independe da notação com :: mencionada anteriormente.") }}
element:before { propriedades do estilo } /* sintaxe CSS2 */
element::before { propriedades do estilo } /* sintaxe CSS3, não suportada pelo IE8 */
A notação ::before foi introduzida no CSS3 com o objetivo de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Navegadores também aceitam a notação :before introduzida no CSS 2.
:before.q:before { content: "»" }
q:after { content: '«' }
<q>Algumas citações</q>, ele disse, <q>são melhores que nenhuma</q>.
Resultado: »Algumas citações«, ele disse, »são melhores que nenhuma«.
Apesar das correções de posicionamento, o Firefox 3.5 não permite que o conteúdo seja gerado como um irmão anteriormente separado (como a declaração das CSS spec(EN) "Os pseudo-elementos <code>:before</code> e <code>:after</code> interagem com outras caixas...como se fossem elementos reais inseridos dentro de seu elemento associado."), eles podem ser usados para proporcionar uma ligeira melhora nos arranjos sem tabelas (isto é, para alcançar o centro), tão longo como o conteúdo a ser centralizado é envolto em outro elemento criança, uma coluna antes e depois do conteúdo pode ser introduzida sem a adição de um irmão anterior ou posterior (por exemplo, talvez seja mais semanticamente correto adicionar um span a mais como anteriormente, que seria para adicionar um <code><div/></code> vazio antes e depois). (E sempre lembrar de adicionar uma largura para um flututante, uma vez que de outra forma ele não flutuará!)
<style type="text/css">
#floatme {float:left; width:50%;}
.example:before {
content: "Floated Before"; /* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
float: left;
width:25%
}
.example:after {
content: "Floated After";
float: right;
width:25%
}
/* For styling */
.example:before, .example:after, .first {
background: yellow;
color: red;
}
</style>
<div class="example">
<span id="floatme">"Floated Before" should be generated on the left of the
viewport and not allow overflow in this line to flow under it. Likewise
should "Floated After" appear on the right of the viewport and not allow this
line to flow under it.</span>
</div>
| Navegador | Versão mais antiga | Suporte a |
|---|---|---|
| Internet Explorer | 8.0 | :before |
| Firefox (Gecko) | 1.0 (1.0) | :before |
| 1.0 (1.5) | :before | ::before | |
| Safari (WebKit) | 1.0 (85) | :before | ::before |
| Opera | 4.0 | :before |
| 7.0 | :before | ::before |
{{ Cssxref(":after") }}
{{ languages( { "en": "en/CSS/:before", "fr": "fr/CSS/:before", "pl": "pl/CSS/:before", "es": "es/CSS/before" } ) }}