initial commit

1 files changed, 322 insertions, 0 deletions

diff --git a/files/pt-br/web/css/content/index.html b/files/pt-br/web/css/content/index.html
new file mode 100644
index 0000000000..603f0e9511
--- /dev/null
+++ b/files/pt-br/web/css/content/index.html
@@ -0,0 +1,322 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - Propriedade CSS
+  - Referencia
+translation_of: Web/CSS/content
+---
+<div>{{CSSRef}}</div>
+
+<p>A propriedade CSS <strong><code>content</code></strong> é usada com os pseudoelementos {{cssxref("::before")}} e {{cssxref("::after")}} para gerar conteúdo em um elemento. Objetos inseridos usando a propriedade <code>content</code> são <em><a href="/pt-BRS/docs/CSS/Replaced_element" title="CSS/Replaced_element">elementos substituídos</a> anônimos</em>.</p>
+
+<pre class="brush: css no-line-numbers">/* Palavras-chave que não podem ser combinadas com outros valores */
+content: normal;
+content: none;
+
+/* Valores &lt;string&gt; com caracteres especiais devem ser escritos */
+/* com escape Unicode, por exemplo \00A0 para &amp;nbsp; */
+content: "prefixo";
+
+/* Valores &lt;url&gt; */
+content: url("http://www.example.com/test.png");
+
+/* Valores &lt;counter&gt; */
+content: counter(contador_capitulo);
+content: counters(contador_secao, ".");
+
+/* Valores attr() associados ao valor do atributo HTML */
+content: attr(valor string);
+
+/* Palavras-chave que variam com o idioma e posição */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* Com exceção de normal e none, vários valores */
+/* podem ser usados simultaneamente */
+content: open-quote chapter_counter;
+
+/* Valores globais */
+content: inherit;
+content: initial;
+content: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>O pseudoelemento não será gerado.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Equivalente a <code>none</code> para os pseudoelementos <code>::before</code> e <code>::after</code>.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>Um ou mais caracteres de texto.</dd>
+ <dt>{{cssxref("&lt;url&gt;")}}</dt>
+ <dd>Uma URL que designa um recurso externo (como uma imagem). Se o recurso não puder ser exibido, ele será ignorado ou um <em lang="en">placeholder</em> será exibido no seu lugar.</dd>
+ <dt>{{cssxref("&lt;counter&gt;")}}</dt>
+ <dd>O valor de um contador CSS, geralmente um número. Ele pode ser exibido usando a função <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter%28%29" title="A documentação sobre este tópico ainda não foi escrita; por favor, considere dar a sua contribuição nela!"><code>counter()</code></a> ou <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/counters%28%29" title="A documentação sobre este tópico ainda não foi escrita; por favor, considere dar a sua contribuição nela!"><code>counters()</code></a>.</dd>
+ <dd>
+ <p>A função <code>counter()</code> tem duas formas: 'counter(<var>nome</var>)' ou 'counter(<var>nome</var>, <var>estilo</var>)'. O texto gerado será o valor do contador mais próximo do nome fornecido no pseudoelemento. Ele será formatado com o estilo especificado (o padrão é <code>decimal</code>).</p>
+
+ <p>A função <code>counters()</code> também tem duas formas: 'counters(<var>nome</var>, <var>string</var>)' ou 'counters(<var>nome</var>, <var>separador</var>, <var>estilo</var>)'. O texto gerado será o valor de todos os contadores com o mesmo nome no escopo do pseudoelemento, do mais afastado ao mais próximo, separados pelo separador especificado. Os contadores serão exibidos no estilo indicado (o padrão é <code>decimal</code>).</p>
+ </dd>
+ <dt><code>attr(x)</code></dt>
+ <dd>O valor do atributo <code>x</code> do elemento. Se não houver um atributo <code>x</code>, uma <em lang="en">string</em> vazia será retornada. A diferenciação de maiúsculas e minúsculas dependerá da linguagem do documento.</dd>
+ <dt><code>open-quote</code> | <code>close-quote</code></dt>
+ <dd>Esses valores serão substituídos pela <em lang="en">string</em> apropriada da propriedade {{cssxref("quotes")}}.</dd>
+ <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
+ <dd>Não introduzem nenhum conteúdo, mas aumentam (ou diminuem) o nível de aninhamento de aspas.</dd>
+</dl>
+
+<h3 id="Sintaxe_formal">Sintaxe formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Cabeçalhos_e_citações">Cabeçalhos e citações</h3>
+
+<p>Este exemplo insere aspas ao redor de citações e adiciona a palavra "Capítulo" antes dos cabeçalhos.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
+&lt;p&gt;De acordo com o Sr. Tim Berners-Lee,
+  &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;I was
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.&lt;/q&gt;
+  Devemos entender que não há nada fundamentalmente errado em criar
+  algo com base nas contribuições de outras pessoas.
+&lt;/p&gt;
+
+&lt;h1&gt;6&lt;/h1&gt;
+&lt;p&gt;De acordo com o Manifesto Mozilla,
+  &lt;q cite="https://www.mozilla.org/about/manifesto/"&gt;As pessoas
+    precisam ter a capacidade de moldar a Internet e suas
+    experiências com ela.&lt;/q&gt;
+  Portanto, podemos concluir que contribuir para a Web aberta pode
+  proteger nossas próprias experiências individuais nela.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Cap\00EDtulo ";  /* O espaço no final cria uma separação
+                                entre o conteúdo adicionado e o
+                                resto do conteúdo */
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}}</p>
+
+<h3 id="Imagem_combinada_com_texto">Imagem combinada com texto</h3>
+
+<p>Este exemplo insere uma imagem antes do <em lang="en">link</em>. Se a imagem não for encontrada, o texto será exibido no seu lugar.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;a href="https://www.mozilla.org/"&gt;Mozilla Home Page&lt;/a&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+  font: x-small Arial, sans-serif;
+  color: gray;
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}}</p>
+
+<h3 id="Alterando_classes_específicas">Alterando classes específicas</h3>
+
+<p>Este exemplo insere texto adicional no final de itens especiais em uma lista.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Categoriass mais vendidas&lt;/h2&gt;
+&lt;ol&gt;
+  &lt;li&gt;Suspenses políticos&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Histórias de terror&lt;/li&gt;
+  &lt;li&gt;Biografias&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Romances de Vampiros&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.new-entry::after {
+  content: " Novo!";  /* O espaço no final cria uma separação
+                         entre o conteúdo adicionado e o
+                         resto do conteúdo */
+  color: red;
+}</pre>
+
+<h4 id="Resultado_3">Resultado</h4>
+
+<p>{{EmbedLiveSample('Targeting_classes', '100%', 160)}}</p>
+
+<h3 id="Imagens_e_atributos_de_elementos">Imagens e atributos de elementos</h3>
+
+<p>Este exemplo insere uma imagem antes de cada <em lang="en">link</em> e adiciona o conteúdo do seu atributo <code>id</code> depois.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a id="moz" href="http://www.mozilla.org/"&gt;
+    Mozilla Home Page&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;
+    Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+}
+
+#mdn::before {
+  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+}
+
+li {
+  margin: 1em;
+}
+</pre>
+
+<h4 id="Resultado_4">Resultado</h4>
+
+<p>{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>8.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Suporte a <code>url()</code></td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>8.0</td>
+   <td>9.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Suporte a <code>url()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("::before")}}</li>
+ <li>{{Cssxref("quotes")}}</li>
+</ul>