CSS: Inhalt:" \00a0 "

Question

Heute bin ich auf eine neue CSS-Syntax gestoßen, die ich noch nie gesehen habe

content:"\00a0";

Überprüfen Sie es w3-Schulen erklärt sie:

Definition und Verwendung

Die Eigenschaft content wird zusammen mit den Pseudo-Elementen :before und :after verwendet, um generierte Inhalte einzufügen.

Meine Frage ist, ob Sie mir ein Beispiel aus der Praxis nennen können, wie wir diese content Eigentum? Und was bedeutet die \00a0 in diesem Fall bedeuten?

Answer 1

El content Eigenschaft wird verwendet, um Inhalte oder sogar HTML-Entities hinzuzufügen. Wie für \00a0 ist der Hexadezimalcode für ein nicht umbrechendes Leerzeichen.

Ressourcen:

Mehr Informationen
Javascript-, CSS- und (X)HTML-Entitäten in numerischer Reihenfolge

Answer 2

Ich habe es schon einmal verwendet, um Text in einer Liste mit fließendem Übergang zu formatieren

#horz-list li {
  list-style: none;
  float: left;
}

#horz-list li:after {
  content: "\00a0-\00a0";
}

 #horz-list li:last-child:after {
  content: "";
}

<ul id="horz-list">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

Das ergibt dann etwas wie

erste Position - zweite Position - dritte Position

Dies hält mein Markup semantisch & ich kann Styling wie der Bindestrich über css einführen.