Valid CSS Content

Es gibt eine content Eigenschaft in CSS, die zusammen mit den ::before und ::after Pseudo-Elementen verwendet wird. Sie fügt Inhalte in das Element ein.

Hier ist ein Beispiel:

<div 
  data-done="&#x2705;"
  class="email">
    [email protected]
</div>

.email::before {
  content: attr(data-done) " Email: "; /* This gets inserted before the email address */
}

Die Eigenschaft akzeptiert im Allgemeinen alles, was Sie dort hineinfallen lassen. Es gibt jedoch einige ungültige Werte, die sie nicht akzeptiert. Ich habe kürzlich von jemandem gehört, der damit verwirrt war, also habe ich selbst ein wenig damit gespielt und einige Dinge gelernt.

Das funktioniert einwandfrei

/* Valid */
::after {
  content: "1";
}

… aber das tut es nicht

/* Invalid, not a string */
::after {
  content: 1;
}

Ich bin mir nicht ganz sicher warum, aber ich stelle mir vor, dass es daran liegt, dass 1 eine einheitenzahl ist (d. h. 1 im Gegensatz zu 1px) und keine Zeichenkette. Sie können ihn auch nicht austricksen! Ich habe versucht, schlau zu sein, so

/* Invalid, no tricks */
::after {
  content: "" 1;
}

Sie können jedoch Zahlen aus Attributen ausgeben, wie Sie vielleicht vermuten

<div data-price="4">Coffee</div>

/* This "works" */
div::after {
  content: " $" attr(data-price);
}

Aber natürlich würden Sie nie generierte Inhalte für wichtige Informationen wie einen Preis verwenden, oder?! (Bitte tun Sie das nicht. Es ist weder sehr zugänglich noch ist der Text auswählbar.)

Auch wenn Sie diese Zahl abrufen und anzeigen können, ist es nur eine Zeichenkette. Sie können damit nichts wirklich anfangen.

<div data-price="4" data-sale-modifier="0.9">Coffee</div>

/* Not gonna happen */
div::after {
  content: " $" 
    calc(attr(data-price) * attr(data-sale-modifier));
}

Sie können überhaupt keine Zahlen verwenden

/* Nope */
::after {
  content: calc(2 + 2);
}

Achtung! Versuchen Sie nicht, Zeichenketten zu verketten, wie Sie es vielleicht in PHP oder JavaScript tun würden

/* These will break */
::after {
  content: "1" . "2" . "3";
  content: "1" + "2" + "3";

  /* Use spaces */
  content: "1" "2" "3";
  /* Or nothing */
  content: "1 2 3";
  /* The type of quote (single or double) doesn't matter, but content not coming back from attr() does need to be quoted. */
}

Es gibt eine Sache in der Spezifikation zum Konvertieren von Attributen in den tatsächlichen Typ, anstatt sie alle als Zeichenketten zu behandeln…

<wood length="12" />

wood {
  width: attr(length em); /* or other values like "number", "px", or "url" */
}

… aber ich bin mir ziemlich sicher, dass das noch nirgendwo funktioniert. Außerdem hilft es uns sowieso nicht bei Pseudoelementen, da Zeichenketten bereits funktionieren und Zahlen nicht.

Die Person, die mich per E-Mail kontaktiert hat, war insbesondere verwirrt, warum sie calc() für content nicht verwenden konnte. Ich bin mir nicht sicher, ob ich Ihnen in dieser Situation bei der Mathematik helfen kann, aber es ist erwähnenswert, dass Pseudoelemente Zähler sein können und diese Zähler ihre eigene begrenzte Form von Mathematik durchführen können. Hier ist zum Beispiel ein Zähler, der bei 12 beginnt und für jedes Element auf dieser Ebene im DOM um -2 inkrementiert.

Sehen Sie den Pen Backwards Double Countdown von Chris Coyier (@chriscoyier) auf CodePen.

Das Einzige, was wir hier noch nicht erwähnt haben, ist, dass ein Pseudoelement ein Bild sein kann. Zum Beispiel

p:before {
  content: url(image.jpg);
}

… aber es ist seltsamerweise begrenzt. Sie können das Bild nicht einmal in der Größe ändern. ¯\_(ツ)_/¯

Viel häufiger ist die Verwendung einer leeren Zeichenkette für den Wert (content: "";), die Dinge wie Clear Floats bewirken kann, aber auch positioniert, skaliert und einen eigenen Hintergrund haben kann.