::before
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
In CSS erzeugt ::before
ein Pseudoelement, das das erste Kind des ausgewählten Elements ist. Es wird häufig verwendet, um einem Element mit der content
-Eigenschaft kosmetische Inhalte hinzuzufügen. Es ist standardmäßig inline.
Probieren Sie es aus
Hinweis: Die durch ::before
und ::after
generierten Pseudoelemente sind Boxen, die so erzeugt werden, als wären sie unmittelbare Kinder des Elements, auf das sie angewendet werden, oder des "ursprünglichen Elements", und können daher nicht auf ersetzte Elemente wie <img>
angewendet werden, deren Inhalt außerhalb des Geltungsbereichs des CSS-Formatierungsmodells liegt.
Syntax
::before {
content: /* value */;
/* properties */
}
Wenn die content
-Eigenschaft nicht angegeben ist, einen ungültigen Wert hat oder normal
oder none
als Wert hat, wird das ::before
Pseudoelement nicht gerendert. Es verhält sich, als ob display: none
gesetzt wäre.
Hinweis: Selectors Level 3 führte die Doppelpunktnotation ::before
ein, um Pseudoklassen von Pseudoelementen zu unterscheiden. Browser akzeptieren auch die in CSS2 eingeführte Einzelpunktnotation :before
.
Barrierefreiheit
Die Verwendung eines ::before
Pseudoelements zum Hinzufügen von Inhalten wird nicht empfohlen, da es für Bildschirmlesegeräte nicht zuverlässig zugänglich ist.
Beispiele
Hinzufügen von Anführungszeichen
Ein einfaches Beispiel für die Verwendung von ::before
Pseudoelementen 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
Dekoratives Beispiel
Wir können Text oder Bilder in der content
-Eigenschaft fast nach Belieben 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
Aufgabenliste
In diesem Beispiel erstellen wir eine einfache Aufgabenliste mit Pseudoelementen. Diese Methode kann oft verwendet werden, um kleine Akzente 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 läuft das obige Codebeispiel live. Beachten Sie, dass keine Icons verwendet werden und das Häkchen tatsächlich das ::before
ist, das in CSS gestaltet wurde. Machen Sie sich bereit, einige Aufgaben zu erledigen.
Ergebnis
Sonderzeichen
Da dies CSS ist, nicht HTML, können Sie in Inhaltswerten keine Markup-Entitäten 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, bestehend aus einem Backslash, gefolgt vom hexadezimalen Unicode-Wert.
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"]::after {
content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
display: inline;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Pseudo-Elements Module Level 4 # generated-content |
Browser-Kompatibilität
BCD tables only load in the browser