::before

Probieren Sie es aus

a {
  color: blue;
  text-decoration: none;
}

a::before {
  content: "🔗";
}

.local-link::before {
  content: url("/shared-assets/images/examples/firefox-logo.svg");
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

<p>
  Learning resources for web developers can be found all over the internet. Try
  out
  <a href="https://web.dev/">web.dev</a>,
  <a href="https://www.w3schools.com/">w3schools.com</a> or our
  <a href="https://newreal1.mobosoft.fun/" class="local-link">MDN web docs</a>.
</p>

Syntax

::before {
  content: /* value */;
  /* properties */
}

Beschreibung

Das ::before-Pseudo-Element ist ein Inline-Block, der als unmittelbares Kind des Elements generiert wird, mit dem es verbunden ist, oder des „ursprünglichen Elements“. Es wird häufig verwendet, um über die content-Eigenschaft kosmetische Inhalte wie Symbole, Anführungszeichen oder andere Dekorationen hinzuzufügen.

::before-Pseudo-Elemente können nicht auf ersetzte Elemente wie <img> angewendet werden, deren Inhalt durch externe Ressourcen bestimmt wird und nicht durch die Stile des aktuellen Dokuments beeinflusst wird.

Ein ::before-Pseudo-Element mit einem display-Wert von list-item verhält sich wie ein Listenelement und kann daher ein ::marker-Pseudo-Element genau wie ein <li>-Element generieren.

Wenn die content-Eigenschaft nicht angegeben ist, einen ungültigen Wert hat oder als Wert normal oder none hat, dann wird das ::before-Pseudo-Element nicht gerendert. Es verhält sich, als wäre display: none gesetzt.

Standardmäßig teilen sich die ::before- und ::after-Pseudo-Elemente denselben Stapelkontext wie ihr übergeordnetes Element. Wenn kein z-index explizit gesetzt ist, erscheint der vom ::after generierte Inhalt über dem von ::before, da ::after später im DOM-Fluss gerendert wird.

Barrierefreiheit

Es wird davon abgeraten, ein ::before-Pseudo-Element zur Hinzufügung von Inhalten zu verwenden, da es nicht zuverlässig zugänglich für Bildschirmlesegeräte ist.

Beispiele

Anführungszeichen

Ein Beispiel für die Verwendung von ::before-Pseudo-Elementen ist das Einfügen von Anführungszeichen. Hier verwenden wir sowohl ::before als auch ::after, um Anführungszeichen zu setzen.

HTML

<q>Some quotes</q>, he said, <q>are better than none.</q>

CSS

q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}

Ergebnis

Dekoratives Beispiel

Wir können Text oder Bilder in der content-Eigenschaft auf nahezu jede gewünschte Weise stylen.

HTML

<span class="ribbon">Notice where the orange box is.</span>

CSS

.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

Ergebnis

To-do Liste

In diesem Beispiel erstellen wir eine To-do-Liste unter Nutzung von Pseudo-Elementen. Diese Methode kann oft verwendet werden, um der Benutzeroberfläche kleine Details hinzuzufügen und die Benutzererfahrung zu verbessern.

HTML

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

CSS

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;
}

JavaScript

const list = document.querySelector("ul");
list.addEventListener(
  "click",
  (ev) => {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);

Hier wird das obige Codebeispiel live ausgeführt. Beachten Sie, dass keine Symbole verwendet werden und das Häkchen eigentlich das ::before-Element ist, das in CSS gestylt wurde. Machen Sie sich an die Arbeit und erledigen Sie einige Aufgaben.

Ergebnis

Unicode-Escape-Sequenzen

Da generierter Inhalt CSS und kein HTML ist, können Sie keine Markup-Entitäten in Inhaltswerten verwenden. Wenn Sie ein Sonderzeichen verwenden müssen und es nicht direkt in Ihre CSS-Inhaltszeichenfolge eingeben können, verwenden Sie eine Unicode-Escape-Sequenz. Diese besteht aus einem umgekehrten Schrägstrich gefolgt vom hexadezimalen Unicode-Wert des Zeichens.

HTML

<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current="step">Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>

CSS

li {
  padding: 0.5em;
}

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::before {
  content: "\21E8 "; /* Unicode escape sequence for "Rightwards White Arrow" */
  display: inline;
}

Ergebnis

::before::marker verschachtelte Pseudo-Elemente

Das ::before::marker verschachtelte Pseudo-Element wählt das Listen-::marker eines ::after-Pseudo-Elements aus, das selbst ein Listenelement ist, also hat es seine display-Eigenschaft auf list-item gesetzt.

In dieser Demo erzeugen wir zusätzliche Listenelemente vor und nach einem Listen-Navigationsmenü, indem wir ::before und ::after verwenden (indem wir sie auf display: list-item setzen, damit sie sich wie Listenelemente verhalten). Wir verwenden dann ul::before::marker und ul::after::marker, um deren Listenmarkierungen eine andere Farbe zu geben.

HTML

<ul>
  <li><a href="#">Introduction</a></li>
  <li><a href="#">Getting started</a></li>
  <li><a href="#">Understanding the basics</a></li>
</ul>

CSS

ul {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
}

ul::before,
ul::after {
  display: list-item;
  color: orange;
}

ul::before {
  content: "Start";
}

ul::after {
  content: "End";
}

ul::before::marker,
ul::after::marker {
  color: red;
}

Ergebnis

Während die Listenpunkte der drei Navigationselemente generiert werden, weil sie <li>-Elemente sind, wurden "Start" und "Ende" über Pseudo-Elemente eingefügt und ::marker wird verwendet, um deren Punkte zu stylen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• ::after
• content