initial commit

1 files changed, 182 insertions, 0 deletions

diff --git a/files/es/web/css/_doublecolon_after/index.html b/files/es/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..c5fe24fedb
--- /dev/null
+++ b/files/es/web/css/_doublecolon_after/index.html
@@ -0,0 +1,182 @@
+---
+title: '::after (:after)'
+slug: 'Web/CSS/::after'
+tags:
+  - CSS
+  - Presentación
+  - Pseudo-elemento CSS
+  - Referencia
+  - Web
+translation_of: 'Web/CSS/::after'
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<div>
+<p><span class="seoSummary">En CSS, <strong><code>::after</code></strong> crea un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> que es el último hijo del elemento seleccionado. Es comunmente usado para añadir contenido cosmético a un elemento con la propiedad {{CSSxRef("content")}}.</span>Es en linea (inline) de forma predeterminada.</p>
+
+<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* Añdade una flecha después de los enlaces */</span>
+<span class="selector token">a<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> "</code>→<code class="language-css">"<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Los pseudo-elementos generados por  <code>::before</code> y <code>::after</code> son <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenidos por la caja de formato del elemento</a>, y por lo tanto no aplica a <em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">elementos reemplazados</a></em> como los elementos {{HTMLElement("img")}}, o {{HTMLElement("br")}}.</p>
+</div>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> CSS3 introdujo la notación <code>::after</code> (con doble dos puntos) para distinguir <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clases</a> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Los navegadores también aceptan <code>:after</code>, añadido en CSS2.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Uso_simple">Uso simple</h3>
+
+<p>Crearemos dos clases: una para párrafos aburridos y otra para párrafos interesantes. Después podremos resaltar cada párrafo añadiendo un pseudo-elemento al final del mismo.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>boring-text<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is some plain old boring text.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Here is some normal text that is neither boring nor exciting.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>exciting-text<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Contributing to MDN is easy and fun.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.exciting-text</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" &lt;- EXCITING!"</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.boring-text</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" &lt;- BORING"</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample('Uso_simple', 500, 150)}}</p>
+
+<h3 id="Ejemplo_decorativo">Ejemplo decorativo</h3>
+
+<p>Podemos estilizar el texto o imágenes de la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ribbon<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Look at the orange box after this text. <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.ribbon</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#5BC8F7</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.ribbon</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">"This is a fancy orange box."</span><span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#FFBA10</span><span class="punctuation token">;</span>
+  <span class="property token">border-color</span><span class="punctuation token">:</span> black<span class="punctuation token">;</span>
+  <span class="property token">border-style</span><span class="punctuation token">:</span> dotted<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample('Ejemplo_decorativo', 450, 20)}}</p>
+
+<h3 id="Tooltips">Tooltips</h3>
+
+<p>El siguiente ejemplo muestra el uso del <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <code>::after</code> en conjunto con la expresión CSS <a href="/es/docs/Web/CSS/attr"><code>attr()</code></a> y el <a href="/es/docs/Web/HTML/Global_attributes#attr-dataset">atributo data personalizado</a> <code>data-descr</code> para crear un <em>tooltip</em> de tipo glosario, completamente en CSS. Mira la vista previa más abajo, o también puedes ver el ejemplo en una <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">página separada.</a></p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Here we have some
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">tabindex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">data-descr</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>collection of words and punctuation<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> with a few
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">tabindex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">data-descr</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>small popups that appear when hovering<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>tooltips<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">span<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">data-descr</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span>
+  <span class="property token">position</span><span class="punctuation token">:</span> relative<span class="punctuation token">;</span>
+  <span class="property token">text-decoration</span><span class="punctuation token">:</span> underline<span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#00F</span><span class="punctuation token">;</span>
+  <span class="property token">cursor</span><span class="punctuation token">:</span> help<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">span<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">data-descr</span><span class="punctuation token">]</span></span><span class="pseudo-class token">:hover</span><span class="pseudo-element token">::after</span>,
+span<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">data-descr</span><span class="punctuation token">]</span></span><span class="pseudo-class token">:focus</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="function token">attr</span><span class="punctuation token">(</span>data-descr<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">position</span><span class="punctuation token">:</span> absolute<span class="punctuation token">;</span>
+  <span class="property token">left</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">top</span><span class="punctuation token">:</span> <span class="number token">24</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">min-width</span><span class="punctuation token">:</span> <span class="number token">200</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="token unit">px</span> <span class="hexcode token">#aaaaaa</span> solid<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffcc</span><span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">12</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#000000</span><span class="punctuation token">;</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">14</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">z-index</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Resultado_3">Resultado</h4>
+
+<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Sin cambios significativos desde la especificación previa.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Permite transiciones en propiedades definidas en los pseudo-elementos.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Permite animaciones en propiedades definidas en los pseudo-elementos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introduce la sintaxis de doble símbolo <code>:</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definición inicial, usando sintáxis de un solo símbolo <code>:</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.after")}}</p>
+</div>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>{{Cssxref("::before")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>