::before

Das ::before-Pseudo-Element ist eine inline Box, die als unmittelbares Kind des Elements erzeugt wird, mit dem es verbunden ist, oder des „ursprünglichen Elements“. Es wird häufig verwendet, um kosmetische Inhalte zu einem Element über die content-Eigenschaft hinzuzufügen, wie z.B. Symbole, Anführungszeichen oder andere Dekorationen.

::before-Pseudo-Elemente können nicht auf ersetzte Elemente angewendet werden, wie z.B. <img>, 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 deshalb ein ::marker-Pseudo-Element ebenso wie ein <li>-Element erzeugen.

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

Die Verwendung eines ::before-Pseudo-Elements zur Hinzufügung von Inhalten wird nicht empfohlen, da es nicht immer zuverlässig von Screenreadern erkannt wird.

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

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

Wir können den Text oder die Bilder in der content-Eigenschaft nahezu beliebig gestalten.

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

In diesem Beispiel erstellen wir eine To-do-Liste mit Pseudo-Elementen. Diese Methode kann häufig verwendet werden, um kleine Details zur Benutzeroberfläche 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 ist das obige Code-Beispiel live ausgeführt. Beachten Sie, dass keine Symbole verwendet werden und das Häkchen tatsächlich das ::before ist, das in CSS gestylt wurde. Gehen Sie voran und erledigen Sie einige Aufgaben.

Ergebnis

Da generierter Inhalt CSS und nicht HTML ist, können Sie in Inhaltswerten keine Markup-Entities verwenden. Wenn Sie ein Sonderzeichen verwenden müssen und es nicht direkt in Ihre CSS-Content-Zeichenfolge eingeben können, verwenden Sie eine Unicode-Escape-Sequenz. Diese besteht aus einem Backslash 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

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

In dieser Demo generieren wir zusätzliche Listenelemente vor und nach einem listennavigationsmenü mit ::before und ::after (indem wir sie auf display: list-item setzen, damit sie sich wie Listenelemente verhalten). Anschließend verwenden wir ul::before::marker und ul::after::marker, um ihren Listensymbolen 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 ihre Punkte zu stylen.

• ::after
• content