1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
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>
{{CSSSyntax}}
<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"><</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">></span></span>Here is some plain old boring text.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></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"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span>Contributing to MDN is easy and fun.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></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">" <- 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">" <- 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"><</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">></span></span>Look at the orange box after this text. <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></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"><</span>p</span><span class="punctuation token">></span></span>Here we have some
<span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span>text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> with a few
<span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span>tooltips<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span>.
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></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>
|
