diff options
Diffstat (limited to 'files/de/web/css/_doublecolon_after/index.html')
| -rw-r--r-- | files/de/web/css/_doublecolon_after/index.html | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/files/de/web/css/_doublecolon_after/index.html b/files/de/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..6eca5cbd0c --- /dev/null +++ b/files/de/web/css/_doublecolon_after/index.html @@ -0,0 +1,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> |