diff options
Diffstat (limited to 'files/pt-br/web/css/_doublecolon_after/index.html')
| -rw-r--r-- | files/pt-br/web/css/_doublecolon_after/index.html | 241 |
1 files changed, 241 insertions, 0 deletions
diff --git a/files/pt-br/web/css/_doublecolon_after/index.html b/files/pt-br/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..3281ed4793 --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_after/index.html @@ -0,0 +1,241 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +translation_of: 'Web/CSS/::after' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">Em CSS, <strong><code>::after</code></strong> cria um <a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elemento</a> que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade {{cssxref("content")}}.</span> É inline por padrão.</p> + +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Adiciona uma seta após os links */</span> +<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span> + <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<div class="note"> +<p>O CSS3 introduziu a notação <code>::after</code> (com dois sinais de dois pontos) para distinguir <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> dos <a href="/pt-BR/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Os navegadores também aceitam <code>:after</code>, introduzido no CSS2.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Uso_simples">Uso simples</h3> + +<p>Vamos criar duas classes: uma para parágrafos tediosos e uma para parágrafos excitantes. Podemos então marcar cada parágrafo adicionando um pseudo-elemento ao final dele.</p> + +<pre class="brush: html"><p class="boring-text">Here is some plain old boring text.</p> +<p>Here is some normal text that is neither boring nor exciting.</p> +<p class="exciting-text">Contributing to MDN is easy and fun. +Just hit the edit button to add new live samples, or improve existing samples.</p></pre> + +<pre class="brush: css">.exciting-text::after { + content: "<- now this *is* exciting!"; + color: green; +} + +.boring-text::after { + content: "<- BORING!"; + color: red; +}</pre> + +<h4 id="Visualização">Visualização</h4> + +<p>{{EmbedLiveSample('Uso_simples', 500, 150)}}</p> + +<h3 id="Exemplos_decorativos">Exemplos decorativos</h3> + +<p>Podemos estilizar textos ou imagens na propriedade {{cssxref("content")}} praticamente de qualquer forma que quisermos.</p> + +<pre class="brush: html"><span class="ribbon">Observe onde a caixa de laranja está.</span></pre> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::after { + content: "Observe esta caixa laranja"; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Visualização_2">Visualização</h4> + +<p>{{EmbedLiveSample('Exemplos_decorativos', 450, 20)}}</p> + +<h3 id="Dicas">Dicas</h3> + +<p>O exemplo a seguir mostra o uso do <code>::after</code> <a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elemento</a> em conjunto com a expressão CSS <a href="/pt-BR/docs/Web/CSS/attr"><code>attr()</code></a> e um <a href="/pt-BR/docs/Web/HTML/Global_attributes#attr-dataset">tributo data personalizado</a> <code>data-descr</code> para criar uma <em>dica </em>em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">página separada.</a></p> + +<pre class="brush: html"><p>Aqui está o exemplo ao vivo do código acima.<br /> + Temos um pouco de <span data-descr="collection of words and punctuation">texto</span> aqui com algumas + <span data-descr="small popups which also hide again">dicas</span>.<br /> + Não seja tímido, passe o mouse por cima para dar uma <span data-descr="not to be taken literally">olhada</span>. +</p> +</pre> + +<pre class="brush: css">span[data-descr] { + position: relative; + text-decoration: underline; + color: #00F; + cursor: help; +} + +span[data-descr]:hover::after { + content: attr(data-descr); + position: absolute; + left: 0; + top: 24px; + min-width: 200px; + border: 1px #aaaaaa solid; + border-radius: 10px; + background-color: #ffffcc; + padding: 12px; + color: #000000; + font-size: 14px; + z-index: 1; +}</pre> + +<h4 id="Visualização_3">Visualização</h4> + +<p>{{EmbedLiveSample('Dicas', 450, 120)}}</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('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Sem mudanças significativas em relação à especificação anterior.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Permite transições em propriedades definidas em pseudo-elementos.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Permite animações em propriedades definidas em pseudo-elementos.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Introduz a sintaxe de dois sinais de dois pontos.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição inicial, usando a sintaxe de um sinal de dois pontos.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre 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 ao <code>:after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}[1]</td> + <td>8.0</td> + <td>{{CompatOpera("4")}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Suporte ao <code>::after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}[1]</td> + <td>9.0</td> + <td>{{CompatOpera("7")}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Suporte à animações e transições</td> + <td>26</td> + <td>{{CompatVersionUnknown}}</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>Recurso</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte ao <code>:after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Suporte ao <code>::after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Suporte à animações e transições</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] O Firefox anterior à versão 3.5 implementou apenas a versão CSS 2.0 de <code>:after</code>. Não foram permitidos {{cssxref("position")}}, {{cssxref("float")}}, <code>list-style-*</code> e algumas propriedades exibição. O Firefox 3.5 removeu estas restrições.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li> +</ul> |