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
|
---
title: '::after (:after)'
slug: 'Web/CSS/::after'
tags:
- CSS
- CSS Pseudoelement
- Layout
- Referenz
- Web
translation_of: 'Web/CSS/::after'
---
<div>{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Das <code>::after</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> matcht ein virtuelles letztes Kindelement des markierten Elements. Es wird typischerweise dazu verwendet, um kosmetischen Inhalt unter Verwendung der {{cssxref("content")}} CSS Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">/* CSS2 Syntax */
element:after { <em>Stileigenschaften</em> }
/* CSS3 Syntax */
element::after { <em>Stileigenschaften</em> }</pre>
<p>Die <code>::after</code> Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a> und <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelementen</a> einzuführen. Browser unterstützen auch die <code>:after</code> Notation, wie sie in CSS 2 eingeführt wurde.</p>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Einfache_Verwendung">Einfache Verwendung</h3>
<p>Lass uns zwei Klassen erstellen: eine für langweilige Absätze und eine für aufregende. Wir können anschließend jeden Absatz markieren, indem wir ein Pseudoelement an dessen Ende setzen.</p>
<pre class="brush: html"><p class="boring-text">Hier ist etwas alter, langweiliger Text.</p>
<p>Hier ist etwas mittelmäßiger Text, weder langweilig noch aufregend.</p>
<p class="exciting-text">An MDN mitzuwirken ist einfach und macht Spaß.
Klicke einfach auf den 'BEARBEITEN' Button und füge neue Livebeispiele hinzu oder verbessere bestehende Beispiele.</p></pre>
<pre class="brush: css">.exciting-text::after {
content: "<- *Das* ist interessant!";
color: green;
}
.boring-text::after {
content: "<- LANGWEILIG!";
color: red;
}</pre>
<h4 id="Ausgabe">Ausgabe</h4>
<p>{{EmbedLiveSample('Einfache_Verwendung', 500, 150)}}</p>
<h3 id="Dekoratives_Beispiel">Dekoratives Beispiel</h3>
<p>Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.</p>
<pre class="brush: html"><span class="ribbon">Beachte, wo die orange Box ist.</span></pre>
<pre class="brush: css">.ribbon {
background-color: #5BC8F7;
}
.ribbon::after {
content: "Sieh dir diese orange Box an.";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}</pre>
<h4 id="Ausgabe_2">Ausgabe</h4>
<p>{{EmbedLiveSample('Dekoratives_Beispiel', 450, 20)}}</p>
<h3 id="Tooltips">Tooltips</h3>
<p>Das folgende Beispiel zeigt die Verwendung des <code>::after</code> <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudoelements</a> in Verbindung mit dem <a href="/en-US/docs/Web/CSS/attr"><code>attr()</code></a> CSS Ausdruck und einem <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset">benutzerdefinierten Datenattribut</a> <code>data-descr</code>, um einen rein CSS-basierten, Wörterbuch ähnlichen <em>Tooltip</em> zu erstellen. Sieh dir die Livevorschau unten an oder das <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">Beispiel auf einer separaten Seite</a>.</p>
<pre class="brush: html"><p>Hier ist ein Livebeispiel des oberen Codes.<br />
Wir haben ein <span data-descr="Sammlung von Wörtern und Interpunktion">text</span> mit ein paar
<span data-descr="kleine Popups, welche auch wieder verschwinden">Tooltips</span>.<br />
Sei nicht schüchtern, beweg die Maus darüber, ums dir <span data-descr="nicht wörtlich nehmen">anzusehen</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="Ausgabe_3">Ausgabe</h4>
<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
<td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
<td>Keine wesentlichen Änderungen zur vorherigen Spezifikation.</td>
</tr>
<tr>
<td>{{Specname("CSS3 Transitions", "#animatable-properties", "Übergängen bei Pseudoelement Eigenschaften")}}</td>
<td>{{Spec2("CSS3 Transitions")}}</td>
<td>Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.</td>
</tr>
<tr>
<td>{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}</td>
<td>{{Spec2("CSS3 Animations")}}</td>
<td>Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Führt die Zwei-Doppelpunkte-Syntax ein.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
{{Compat("css.selectors.after")}}
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
</ul>
|
