7 praktische Anwendungsfälle für die ::before- und ::after-Pseudoelemente in CSS

CSS ::before und ::after Pseudoelemente ermöglichen es Ihnen, "Inhalt" vor und nach jedem nicht ersetzten Element einzufügen (z. B. sie funktionieren bei einem <div>, aber nicht bei einem <input>). Dies ermöglicht es Ihnen effektiv, etwas auf einer Webseite anzuzeigen, das möglicherweise nicht im HTML-Inhalt vorhanden ist. Sie sollten es nicht für *tatsächliche* Inhalte verwenden, da es nicht sehr zugänglich ist, da Sie Text, der auf diese Weise auf der Seite eingefügt wird, nicht einmal auswählen und kopieren können – es ist nur dekorativer Inhalt.

In diesem Artikel führe ich Sie durch sieben verschiedene Beispiele, die zeigen, wie ::before und ::after verwendet werden können, um interessante Effekte zu erzielen.

Beachten Sie, dass ich für die meisten Beispiele nur die Teile des Codes erkläre, die sich speziell mit CSS-Pseudoelementen befassen. Das gesagt, ist der gesamte CSS-Code in den eingebetteten Demos verfügbar, wenn Sie den Code für zusätzliche Stile sehen möchten.

Styling von kaputten Bildern

Wenn ein Benutzer Ihre Website besucht, kann seine Internetverbindung (oder ein Faktor außerhalb Ihrer Kontrolle) dazu führen, dass Ihre Bilder nicht heruntergeladen werden, und infolgedessen zeigt der Browser ein Symbol für ein kaputtes Bild und den alt-Text des Bildes an (falls er tatsächlich vorhanden ist).

Wie wäre es, stattdessen einen benutzerdefinierten Platzhalter anzuzeigen? Sie können das mit ::before und ::after mit etwas CSS-Positionierung erreichen.

Zuerst müssen wir eine relative Positionierung auf dem Bildelement verwenden. Wir werden später eine absolute Positionierung auf einem der Pseudoelemente verwenden, daher sorgt diese relative Position dafür, dass das Pseudoelement innerhalb des Inhalts des Bildelements positioniert wird, anstatt vollständig aus dem Dokumentenfluss herauszufallen.

img {
  display: block; /* Avoid the space under the image caused by line height */
  position: relative;
  width: 100%
}

Als Nächstes erstellen wir den Bereich für den Effekt des kaputten Bildes mithilfe des ::before-Pseudoelements des Bildes. Wir werden dies zunächst mit einem hellgrauen Hintergrund und einem etwas dunkleren Rand gestalten.

img::before {
  background-color: hsl(0, 0%, 93.3%);
  border: 1px dashed hsl(0, 0%, 66.7%);
  /* ... */
}

<img> ist ein ersetztes Element. Warum verwenden Sie ein ::before-Pseudoelement dafür? Das wird nicht funktionieren! Richtig. In diesem Szenario wird das Pseudoelement in Chrome und Firefox angezeigt, wenn das Bild nicht geladen werden kann, was genau das ist, was Sie wollen. In der Zwischenzeit zeigt Safari nur die auf den Alt-Text angewendeten Stile.

Die Stile werden auf die obere linke Ecke des kaputten Bildes angewendet.

Bis jetzt gut. Jetzt können wir es zu einem blockbasierten Element machen (display: block) und ihm eine Höhe geben, die den gesamten verfügbaren Platz ausfüllt.

img::before {
  /* ... */
  display: block;
  height: 100%;
}

Wir können den Stil noch etwas verfeinern. Runden wir zum Beispiel die Ecken. Wir sollten dem alt-Text auch etwas Platz lassen, indem wir dem Pseudoelement die volle Breite und eine absolute Positionierung geben, um die Platzierung von Dingen besser kontrollieren zu können.

img::before {
  /* ... */
  border-radius: 4px;
  content: "";
  position: absolute;
  width: 100%;
}

Wenn Sie hier aufhören und Ihre Arbeit überprüfen, kratzen Sie sich vielleicht am Kopf, weil der alt-Text plötzlich verschwunden ist.

Das liegt daran, dass wir content auf eine leere Zeichenkette gesetzt haben (was wir benötigen, um unseren generierten Inhalt und unsere Stile anzuzeigen) und den gesamten Bereich abdecken, einschließlich des tatsächlichen Alt-Textes. Er ist da, wir können ihn nur nicht sehen.

Wir können ihn sehen, wenn wir den alt-Text auf eine *alternative* (verstehen Sie?) Weise anzeigen, diesmal mit Hilfe des ::after-Pseudoelements. Die content-Eigenschaft kann tatsächlich den Text des alt-Attributs eines Bildes mithilfe der attr()-Funktion anzeigen.

img::after {
  content: attr(alt);

  /* Some light styling */
  font-weight: bold;
  position: absolute;
  height: 100%;
  left: 0px;
  text-align: center;
  top: 1px;
  width: 100%;
}

Das ist großartig! Zumindest in Chrome.

Aber in Firefox nicht so sehr.

Eine schnelle Lösung besteht darin, das alt-Attribut direkt mithilfe eines Attributselektors (in diesem Fall img[alt]) anzusprechen und ähnliche Stile dort anzuwenden, damit die Dinge mit Chrome übereinstimmen.

img[alt] {
  text-align: center;
  font-weight: bold;
  color: hsl(0, 0%, 60%);
}

Jetzt haben wir einen großartigen Platzhalter, der in Chrome und Firefox konsistent ist.

Benutzerdefinierter Blockquote

Blockquotes sind Zitate oder Auszüge aus einem zitierten Werk. Sie bieten auch eine wirklich großartige Gelegenheit, eine Textwand mit etwas Visuell Interessantem aufzubrechen.

Es gibt alle möglichen Arten, Blockquotes zu gestalten. Chris hat eine Reihe von fünf Stilen, die bis ins Jahr 2007 zurückreichen.

Ich möchte eine weitere Technik betrachten, die ::before und ::after einbezieht. Wie wir beim letzten Beispiel gesehen haben, können wir die content-Eigenschaft verwenden, um generierten Inhalt anzuzeigen, und andere Eigenschaften anwenden, um ihn zu verschönern. Setzen wir große Anführungszeichen am Anfang und Ende eines Blockquotes.

Das HTML ist unkompliziert

<blockquote>
  <!-- Your text here -->
</blockquote>

Ein paar Kosmetika in CSS

blockquote {
  font-style: italic;
  line-height: 1.618;
  font-size: 1.2em;
  width: 30em;
  position: relative;
  padding: 40px 80px;
}

Beachten Sie das position: relative darin, denn wie Sie lernen werden, ist es unerlässlich für die Positionierung der Blockquotes.

Wie Sie wahrscheinlich schon erraten haben, werden wir ::before für das erste Anführungszeichen und ::after für das schließende verwenden. Nun könnten wir einfach die content-Eigenschaft bei beiden aufrufen und die Zeichen dort generieren. Aber CSS bietet uns Werte für open-quote und close-quote.

blockquote::before {
  content: open-quote;
  /* Place it at the top-left */
  top: 0;
  left: 0;
}

blockquote::after {
  content: close-quote;
  /* Place it at thee bottom-right */
  bottom: 0;
  right: 0;
}

Dies gibt uns die gewünschten Anführungszeichen, aber lassen Sie mich die Stile etwas aufpolieren.

blockquote::before,
blockquote::after {
  background-color: #cccccc;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 1.618;
  font-size: 3em;
  border-radius: 100%;
  text-align: center;
  position: absolute;
}

Symbolpunktliste

Wir haben geordnete (<ol>) und ungeordnete (<ul>) Listen in HTML. Beide haben Standardstile, die durch die Benutzeroberflächen-Stylesheet des Browsers bestimmt werden. Aber mit dem ::before-Pseudoelement können wir diese "Standard"-Stile mit etwas Eigenem überschreiben. Und wissen Sie was? Wir können Emojis (😊) in der content-Eigenschaft verwenden!

.name-list li::before {
  content: "😊";
  margin-right: 15px;
  font-size: 20px;
}

Auch wenn das großartig ist, ist es erwähnenswert, dass wir tatsächlich das ::marker-Pseudoelement verwenden könnten, das speziell für das Styling von Listenmarkierungen entwickelt wurde. Eric Meyer zeigt uns, wie das funktioniert, und es ist wahrscheinlich langfristig der bessere Weg.

Animierter Kippschalter

Einer der raffiniertesten Tricks zum Gestalten von Formularen ist die Erstellung eines Kippschalters aus einer Standard-HTML-Checkbox. Tatsächlich hat Preethi Sam kürzlich einen Ansatz dafür geteilt, als sie eine Reihe anderer Checkbox-Styling-Tricks mithilfe von CSS-Masken vorgestellt hat.

Dem Namen nach wird ein Kippschalter verwendet, um zwischen den markierten und unmarkierten Zuständen einer Checkbox zu wechseln.

<form class="container">
  <label class="switch">
    <input type="checkbox" />
  </label>
</form>

Die Anpassung ist dank Modifikationen, die dem <input>-Element über die ::before- und ::after-Pseudoelemente hinzugefügt werden, vollständig möglich. Aber zuerst hier einige Basis-CSS für das <form>-Element

.container {
  background: #212221;
  background: linear-gradient(to right, #1560bd, #e90);
  border-radius: 50px;
  height: 40px;
  position: relative;
  width: 75px;    
}

Wir werden das Standardaussehen der Checkbox "verstecken" und sie gleichzeitig den gesamten Platz einnehmen lassen. Seltsam, oder? Sie ist unsichtbar, aber technisch gesehen trotzdem da. Das machen wir, indem wir

• ihre Position auf absolute ändern,
• die Darstellung auf none setzen und
• ihre width und height auf 100% setzen.

input {
  -webkit-appearance: none; /* Safari */
  cursor: pointer; /* Show it's an interactive element */
  height: 100%;
  position: absolute;
  width: 100%;
}

Nun stylen wir das <input>-Element mit seinem ::before-Pseudoelement. Dieses Styling verändert das Aussehen des Eingabefeldes und bringt uns dem Endergebnis näher.

input::before {
  background: #fff;
  border-radius: 50px;
  content: "";
  height: 70%;
  position: absolute;
  top: 50%;
  transform: translate(7px, -50%); /* Move styling to the center of the element */
  width: 85%;
}

Was, Moment? Man könnte denken, dass ::before nicht mit einem ersetzten Element wie <input> funktioniert. Und das stimmt auch, aber nur wenn der Eingabetyp image ist, was einem <img>-Element entspricht. Andere Formularsteuerelemente, wie eine Checkbox, sind in der HTML-Spezifikation als nicht ersetzte Elemente definiert.

Als Nächstes müssen wir den "Kipp"-Button erstellen, und zufällig haben wir noch das ::after-Pseudoelement zur Verfügung, um ihn zu erstellen. Aber es gibt zwei Dinge, die erwähnenswert sind:

1. Der background ist ein linear-gradient.
2. Der "Kipp"-Button wird mit der transform-Eigenschaft in die Mitte des <input> verschoben.

input::after {
  background: linear-gradient(to right, orange, #8e2de2);
  border-radius: 50px;
  content: "";
  height: 25px;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  transform: translate(7px, -50%);
  transition: all .4s;
  width: 25px;
}

Versuchen Sie, auf den Kippschalter zu klicken. Nichts passiert. Das liegt daran, dass wir den markierten Zustand des <input> nicht tatsächlich ändern. Und selbst wenn wir es täten, ist das Ergebnis... unangenehm.

Die Lösung besteht darin, das :checked-Attribut auf das ::after-Pseudoelement des <input> anzuwenden. Indem wir speziell den markierten Zustand der Checkbox ansprechen und ihn mit dem ::after-Pseudoelement verketten, können wir den Kipppunkt wieder an seinen Platz verschieben.

input:checked::after {
  opacity: 1;
  transform: translate(170%, -50%);
}

Verlaufsgrenze

Wir können Bilder mit Rändern versehen, um sie hervorzuheben oder nahtloser in ein Design zu integrieren. Wussten Sie, dass wir einen Verlauf auf einem Rand verwenden können? Nun, das können wir mit ::before (es gibt natürlich auch andere Wege).

Die Kernidee ist, einen Verlauf über dem Bild zu erstellen und die CSS-Eigenschaft z-index mit einem negativen Wert zu verwenden. Der negative Wert zieht den Verlauf unter das Bild in der Stapelreihenfolge. Das bedeutet, dass das Bild immer oben erscheint, solange der Verlauf einen negativen z-index hat.

.gradient-border::before {
  /* Renders the styles */
  content: "";
  /* Fills the entire space */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* Creates the gradient */
  background-image: linear-gradient(#1a1a1a, #1560bd);
  /* Stacks the gradient behind the image */
  z-index: -1;
}

figure {
  /* Removes the default margin */
  margin: 0;
  /* Squeezes the image, revealing the gradient behind it */
  padding: 10px;
}

Verlaufsüberlagerungen

Dies ähnelt dem, was wir im vorherigen Beispiel getan haben, aber hier wenden wir den Verlauf *über* dem Bild an. Warum würden wir das tun? Es kann eine schöne Möglichkeit sein, dem Bild etwas Textur und Tiefe zu verleihen. Oder vielleicht kann es verwendet werden, um ein Bild aufzuhellen oder abzudunkeln, wenn Text darauf liegt, der für die Lesbarkeit zusätzlichen Kontrast benötigt.

Obwohl dies dem, was wir gerade getan haben, ähnelt, werden Sie einige offensichtliche Unterschiede feststellen.

figure::before {
  background-image: linear-gradient(to top right, #1a1a1a, transparent);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

Sehen Sie das? Es gibt kein z-index, weil es in Ordnung ist, wenn der Verlauf auf dem Bild gestapelt wird. Wir führen auch Transparenz im Hintergrundverlauf ein, die das Bild durch den Verlauf durchscheinen lässt. Wissen Sie, wie eine Überlagerung.

Benutzerdefinierte Radiobuttons

Die meisten, wenn nicht alle von uns versuchen, die Standardstile von HTML-Radiobuttons anzupassen, und das wird normalerweise mit ::before und ::after erreicht, wie wir es bereits bei der Checkbox getan haben.

Wir werden zuerst einige Basisstile festlegen, nur um die Bühne zu bereiten.

/* Centers everything */
.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

/* Styles the form element */
.form {
  background: #ccc;
  height: 100vh;
  width: 100%;
}

/* Styles the inputs */
.form-row {
  background: #fff;
  border-radius: 50px;
  height: 40px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  width: 150px;
}

Entfernen wir nun die Standardstile der Radiobuttons, wieder mit appearance: none;.

.form-input {
  -webkit-appearance: none; /* Safari */
  appearance: none;
}

::before sollte in der oberen linken Ecke des Radiobuttons positioniert werden, und wenn er markiert ist, ändern wir seine Hintergrundfarbe.

.form-input::before {
  /* Renders the styles */
  content: '';
  /* Shows that it's interactive */
  cursor: pointer;
  /* Positions it to the top-left corner of the input */
  position: absolute;
  top: 0;
  left: 0;
  /* Takes up the entire space */
  height: 100%;
  width: 100%;
}

/* When the input is in a checked state... */
.form-input:checked::before {
  /* Change the background color */
  background: #21209c;
}

Wir müssen noch einige Dinge mit ::after klären. Insbesondere, wenn der Radiobutton markiert ist, möchten wir die Farbe des kreisförmigen Rings in Weiß ändern, da die Ringe in ihrem aktuellen Zustand blau sind.

.form-input::after {
  /* Renders the styles */
  content: '';
  /* Shows that it's interactive */
  cursor: pointer;
  /* A little border styling */
  border-radius: 50px;
  border: 4px solid #21209c;
  /* Positions the ring */
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translate(0, -50%);
  /* Sets the dimensions */
  height: 15px;
  width: 15px;
}

/* When the input is in a checked state... */
.form-input:checked::after {
  /* Change ::after's border to white */
  border: 4px solid #ffffff;
}

Das Formularlabel ist hier immer noch unbrauchbar. Wir müssen das Formularlabel direkt ansprechen, um Farbe hinzuzufügen, und wenn das Formularfeld markiert ist, ändern wir diese Farbe in etwas Sichtbares.

.form-label {
  color: #21209c;
  font-size: 1.1rem;
  margin-left: 10px;
}

Klicken Sie auf die Buttons und es passiert *immer noch* nichts. Hier ist, was vor sich geht. Die position: absolute bei ::before und ::after verdeckt Dinge, wenn die Radiobuttons markiert sind, da alles, was in der Hierarchie des HTML-Dokuments vorkommt, verdeckt wird, es sei denn, es wird an eine neue Stelle im HTML-Dokument verschoben oder seine Position wird mit CSS geändert. Jedes Mal, wenn der Radiobutton markiert ist, wird sein Label verdeckt.

Sie wissen wahrscheinlich schon, wie das zu beheben ist, da wir dasselbe Problem bereits in einem anderen Beispiel gelöst haben? Wir wenden z-index: 1 (oder position: absolute) auf das Formularlabel an.

.form-label {
  color: #21209c;
  font-size: 1.1rem;
  margin-left: 10px;
  z-index: 1; /* Makes sure the label is stacked on top */
  /* position: absolute; This is an alternative option */
}

Zusammenfassung

Wir haben sieben verschiedene Möglichkeiten behandelt, wie wir die ::before- und ::after-Pseudoelemente verwenden können, um interessante Effekte zu erzielen, Standardstile anzupassen, nützliche Platzhalter zu erstellen und Bildern Ränder hinzuzufügen.

Wir haben keineswegs alle Möglichkeiten abgedeckt, die wir erschließen können, wenn wir diese zusätzlichen Elemente nutzen, die mit CSS ausgewählt werden können. Lynn Fisher hat es sich jedoch zur Aufgabe gemacht, erstaunliche Designs mit einem einzigen Element zu erstellen. Und vergessen wir nicht Diana Smiths CSS-Kunst, die an mehreren Stellen Pseudoelemente verwendet, um realistische, malerische Effekte zu erzielen.