initial commit

1 files changed, 230 insertions, 0 deletions

diff --git a/files/de/web/css/_doublecolon_before/index.html b/files/de/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..080ef608bb
--- /dev/null
+++ b/files/de/web/css/_doublecolon_before/index.html
@@ -0,0 +1,230 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - CSS Pseudoelement
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><span class="seoSummary"><code>::before</code> erzeugt ein <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudoelement</a>, dass das erste Kind des gematchten Elements ist. Es wird oft dazu verwendet, um kosmetische Inhalte unter Verwendung der {{cssxref("content")}} Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">/* CSS3 Syntax */
+element::before { <em>Stileigenschaften</em> }
+
+/* CSS2 veraltete Syntax (nur benötigt, um IE8 zu unterstützen) */
+element:before  { <em>Stileigenschaften</em> }
+
+/* Fügt Inhalte vor jedem &lt;p&gt; Element ein */
+p::before { content: "Hallo Welt!"; }</pre>
+
+<p>Die <code>::before</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>:before</code> Notation, wie sie in CSS 2 eingeführt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Hinzufügen_von_Anführungszeichen">Hinzufügen von Anführungszeichen</h3>
+
+<p>Ein einfaches Beispiel für die Verwendung von <code>::before</code> Pseudoelementen ist das Hinzufügen von Anführungszeichen. Hier werden <code>::before</code> und <code>::after</code> verwendet, um Anführungszeichen einzufügen.</p>
+
+<h4 id="HTML_Inhalt">HTML Inhalt</h4>
+
+<pre class="brush:html notranslate">&lt;q&gt;Ein paar Anführungszeichen&lt;/q&gt;, sagte er, &lt;q&gt;sind besser als keine&lt;/q&gt;.</pre>
+
+<h4 id="CSS_Inhalt">CSS Inhalt</h4>
+
+<pre class="brush:css notranslate">q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}</pre>
+
+<h4 id="Ausgabe">Ausgabe</h4>
+
+<p>{{EmbedLiveSample('Hinzufügen_von_Anführungszeichen', '500', '50')}}</p>
+
+<h3 id="Dekoratives_Beispiel">Dekoratives Beispiel</h3>
+
+<p>Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.</p>
+
+<h4 id="HTML_Inhalt_2">HTML Inhalt</h4>
+
+<pre class="brush: html notranslate">&lt;span class="ribbon"&gt;Beachte, wo die orange Box ist.&lt;/span&gt;</pre>
+
+<h4 id="CSS_content">CSS content</h4>
+
+<pre class="brush: css notranslate">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  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, 60)}}</p>
+
+<h3 id="Todo-Liste">Todo-Liste</h3>
+
+<p>In diesem Beispiel erstellen wir eine einfache Todo-Liste mit Hilfe von Pseudoelementen. Diese Methode kann oft dazu verwendet werden, kleine Änderungen an der Benutzerschnittstelle hinzuzufügen und die User Experience zu verbessern.</p>
+
+<h4 id="HTML_Inhalt_3">HTML Inhalt</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Milch kaufen&lt;/li&gt;
+  &lt;li&gt;Mit Hund Gassi gehen&lt;/li&gt;
+  &lt;li&gt;Trainieren&lt;/li&gt;
+  &lt;li&gt;Code schreiben&lt;/li&gt;
+  &lt;li&gt;Musik spielen&lt;/li&gt;
+  &lt;li&gt;Entspannen&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_Inhalt_2">CSS Inhalt</h4>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript_Inhalt">JavaScript Inhalt</h4>
+
+<pre class="brush: js notranslate">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<p>Das obige Beispiel ist ein Livebeispiel. Beachte, dass keine Symbole verwendet werden und dass der Haken in Wirklichkeit das <code>::before</code> ist, dass durch CSS dargestellt wird.</p>
+
+<h4 id="Ausgabe_3">Ausgabe</h4>
+
+<p>{{EmbedLiveSample('Todo-Liste', 400, 300)}}</p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Obwohl die Fehlerbehebungen in Firefox 3.5 bzgl. Positionierung es nicht erlauben, Inhalte als ein separates, vorheriges Geschwisterelement zu erstellen (wie die <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">CSS Spezifikation</a> sagt "The :before and :after pseudo-elements elements interact with other boxes [...] as if they were real elements inserted just inside their associated element.", etwa: "Die :before- und :after-Pseudo-Elemente interagieren mit anderen Boxen [...] so als wären sie reale Elemente, die in dem dazugehörigen Element eingefügt wären), können Sie dennoch eingesetzt werden um leichte Verbesserungen in tabellenlosen Layouts (z.B. um ein Element zu zentrieren) zu erhalten. Solange der zu zentrierende Inhalt ein Kindelement ist, können eine vorhergehende und nachfolgende Spalte eingefügt werden ohne eigene Elemente dafür zu verwenden (d.h., es ist eventuell semantisch korrekter, wie unten in dem Beispiel, ein zusätzliches span-Element anstelle jeweils eines leeres div-Elements davor und danach einzufügen). (Und denke immer daran, einem gefloateten Element eine Breite zu geben, andernfalls wird es nicht floaten!)</p>
+
+<h4 id="HTML_Inhalt_4">HTML Inhalt</h4>
+
+<pre class="brush: html notranslate">&lt;div class="example"&gt;
+&lt;span id="floatme"&gt;"Davor umflossen" sollte links vom Viewport erstellt werden
+und Umfluss in dieser Zeile nicht erlauben, sie unterhalb zu umfließen. Genauso sollte
+"Danach umflossen" rechts vom Viewport erscheinen und dieser Zeile nicht erlauben, es unterhalb zu umfließen.&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_Inhalt_3">CSS Inhalt</h4>
+
+<pre class="brush: css notranslate">#floatme {
+  float: left; width: 50%;
+}
+
+/* Um eine leere Spalte zu erhalten, einfach den hexadezimalen Wert für einen nicht umbrechenden Leerraum angeben: \a0 als Attributwert für content (verwende \0000a0 wenn weitere Zeichen folgen) */
+.example::before {
+  content: "Davor umflossen";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Danach umflossen";
+  float: right;
+  width:25%
+}
+
+/* For styling */
+.example::before, .example::after, .first {
+  background: yellow;
+  color: red;
+}</pre>
+
+<h4 id="Ausgabe_4">Ausgabe</h4>
+
+<p>{{EmbedLiveSample("Hinweise")}}</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-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Keine wesentlichen Änderungen zur vorherigen Spezifikation.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "Übergänge 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', '::before')}}</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', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibililtät">Browser Kompatibililtät</h2>
+
+<p>{{Compat("css.selectors.before")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}, {{cssxref("content")}}</li>
+</ul>