---
title: '::before (:before)'
slug: 'Web/CSS/::before'
translation_of: 'Web/CSS/::before'
---
<div>{{CSSRef}}</div>

<h2 id="Sumário">Sumário</h2>

<p><span class="seoSummary"><code>::before</code> cria um <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade {{cssxref("content")}}. Este elemento é inline por padrão.</span></p>

<h2 id="Sintaxe">Sintaxe</h2>

{{csssyntax}}

<p>A notação <code>::before</code> (com dois dois-pontos) foi introduzida no CSS3 afim de diferenciar <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> de <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Navegadores também aceitam a notação <code>:before</code> introduzida no CSS 2.</p>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Adicionando_aspas">Adicionando aspas</h3>

<p>Um exemplo simples do uso de pseudo-elementos <code>::before</code> pseudo-elementos é a exibição de aspas. Aqui usamos <code>::before e </code><code>{{Cssxref("::after")}}</code> para inserir caracteres de aspas.</p>

<h4 id="Conteúdo_HTML">Conteúdo HTML</h4>

<pre class="brush:html">&lt;q&gt;Algumas citações&lt;/q&gt;, ele disse, &lt;q&gt;são melhor do que nenhuma.&lt;/q&gt;</pre>

<h4 id="Conteúdo_CSS">Conteúdo CSS</h4>

<pre class="brush:css">q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}</pre>

<h4 id="Saída">Saída</h4>

<p>{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}</p>

<h3 id="Exemplo_decorativo">Exemplo decorativo</h3>

<p>Podemos estilizar textos e imagens na propriedade {{cssxref("content")}} praticamente da forma que desejarmos.</p>

<h4 id="Conteúdo_HTML_2">Conteúdo HTML</h4>

<pre class="brush: html">&lt;span class="ribbon"&gt;Observe onde a caixa laranja está.&lt;/span&gt;</pre>

<h4 id="Conteúdo_CSS_2">Conteúdo CSS</h4>

<pre class="brush: css">.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Olhe para esta caixa laranja.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}</pre>

<h4 id="Saída_2">Saída</h4>

<p>{{EmbedLiveSample('Decorative_example', 450, 60)}}</p>

<h3 id="Lista_To-do">Lista To-do</h3>

<p>Neste exemplo vamos criar uma simples lista de tarefas, usando pseudo-elementos. Este método pode frequentemente ser utilizado para dar pequenos toques à UI (User Interface) e melhorar a experiência do usuário.</p>

<h4 id="Conteúdo_HTML_3">Conteúdo HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;Comprar Leite&lt;/li&gt;
  &lt;li&gt;Levar o cachorro para passear&lt;/li&gt;
  &lt;li&gt;Exercitar-se&lt;/li&gt;
  &lt;li&gt;Escrever codigo&lt;/li&gt;
  &lt;li&gt;Tocar musica&lt;/li&gt;
  &lt;li&gt;Relaxar&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h4 id="Conteúdo_CSS_3">Conteúdo CSS</h4>

<pre class="brush: css">li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}</pre>

<h4 id="Conteúdo_JavaScript">Conteúdo JavaScript</h4>

<pre class="brush: js">var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done');
  }
}, false);
</pre>

<p>Aqui está rodando o código acima. Perceba que nenhum ícone é utilizado e o check-mark é o <code>::before</code> que foi estilizado no CSS.</p>

<h4 id="Saída_3">Saída</h4>

<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p>

<h2 id="Notas">Notas</h2>

<p>Embora as correções posicionadas e fixadas no Firefox 3.5 não permitam que o conteúdo seja gerado como um irmão anterior ao elemento (conforme a especificação para o CSS indicam "Os Pseudo-elementos :before e :after interagem com outros elementos como se fosse elementos reais inseridos dentro do elemento associado."), eles podem ser usados para proporcionar uma ligeira melhora em layouts sem tables (por exemplo, para alcançar a centralização), a medida que o conteúdo a ser centrado está envolvido com um elemento filho adicional, uma coluna antes e depois do conteúdo pode ser introduzida sem adicionar elementos filhos reais (isto é, talvez mais semanticamente correto para adicionar uma pequena distância, do que seria adicionar um div vazio antes e / ou depois). <span id="result_box" lang="pt"><span>(E sempre lembre-se de adicionar uma largura a um flutuador, pois, de outra forma, não flutuará!)</span></span></p>

<h4 id="HTML_content">HTML content</h4>

<pre class="brush: html">&lt;div class="example"&gt;
&lt;span id="floatme"&gt;"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.&lt;/span&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_content">CSS content</h4>

<pre class="brush: css">#floatme { float: left; width: 50%; }

/* 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) */
.example::before {
  content: "Floated Before";
  float: left;
  width: 25%
}
.example::after {
  content: "Floated After";
  float: right;
  width:25%
}

/* For styling */
.example::before, .example::after, .first {
  background: yellow;
  color: red;
}</pre>

<h4 id="Output">Output</h4>

<p>{{EmbedLiveSample("Notes")}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>No significant changes to the previous specification.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
   <td>{{Spec2("CSS3 Transitions")}}</td>
   <td>Allows transitions on properties defined on pseudo-elements.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Animations", "", "")}}</td>
   <td>{{Spec2("CSS3 Animations")}}</td>
   <td>Allows animations on properties defined on pseudo-elements.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Introduces the two-colon syntax.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition, using the one-colon syntax</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td><code>:before</code> support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td>
   <td>8.0</td>
   <td>{{CompatOpera("4")}}</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td><code>::before</code> support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup></td>
   <td>9.0</td>
   <td>{{CompatOpera("7")}}</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>Support of animations and transitions</td>
   <td>26</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td><code>:before</code> support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>::before</code> support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>7.1</td>
   <td>{{CompatUnknown}}</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td>Support of animations and transitions</td>
   <td>26</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("4.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Firefox prior to version 3.5 only implemented the CSS 2.0 version of :before. Not allowed were {{cssxref("position")}}, {{cssxref("float")}}, <code>list-style-*</code> and some display properties. Firefox 3.5 removed those restrictions.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{Cssxref("::after")}}, {{cssxref("content")}}</li>
</ul>