Hinzufügen von HTML-Elementen mit CSS-Inhalt

Question

Wie verwenden Sie die CSS content Eigenschaft zum Hinzufügen HTML Einheiten?

So etwas druckt einfach   anstelle des nicht umbrechenden Leerzeichens auf den Bildschirm übertragen:

.breadcrumbs a:before {
  content: ' ';
}

Answer 1

Sie müssen den escapeten Unicode verwenden:

Wie

.breadcrumbs a:before {
  content: '\0000a0';
}

Mehr Informationen über : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Answer 2

CSS ist nicht HTML.   ist eine benannte Zeichenerklärung in HTML; entspricht der dezimalen numerischen Zeichenreferenz   . 160 ist die Dezimalzahl Codepunkt de la NO-BREAK SPACE Zeichen in Unicode (oder UCS-2 ; siehe die HTML 4.01 Spezifikation ). Die hexadezimale Darstellung dieses Codepunkts ist U+00A0 (160 = 10 × 16 1 + 0 × 16 0 ). Sie finden das im Unicode Code-Tabellen et Charakter-Datenbank .

In CSS müssen Sie für solche Zeichen eine Unicode-Escape-Sequenz verwenden, die auf dem hexadezimalen Wert des Codepunkts eines Zeichens basiert. Sie müssen also schreiben

.breadcrumbs a:before {
  content: '\a0';
}

Dies funktioniert, solange die Escape-Sequenz am Ende eines String-Wertes steht. Wenn Zeichen folgen, gibt es zwei Möglichkeiten, um Fehlinterpretationen zu vermeiden:

a) (von anderen erwähnt) Verwenden Sie genau sechs hexadezimale Ziffern für die Escape-Sequenz:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b) Fügen Sie nach der Escape-Sequenz ein Leerzeichen ein:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(Da f ist eine hexadezimale Ziffer, \a0f würde sonst bedeuten GURMUKHI LETTER EE hier, oder wenn Sie eine geeignete Schriftart haben).

Das trennende Leerzeichen wird ignoriert, und dies wird angezeigt  foo , wobei der angezeigte Raum hier ein NO-BREAK SPACE Charakter.

Der Weißraum-Ansatz ( '\a0 foo' ) hat die folgenden Vorteile gegenüber dem sechsstelligen Ansatz ( '\0000a0foo' ) :

• es ist leichter zu tippen da führende Nullen nicht erforderlich sind und die Ziffern nicht gezählt werden müssen;
• es ist leichter zu lesen weil zwischen der Escape-Sequenz und dem folgenden Text ein Leerzeichen steht und die Ziffern nicht gezählt werden müssen;
• es benötigt weniger Platz , da führende Nullen nicht notwendig sind;
• es ist aufwärtskompatibel da die Unterstützung von Unicode-Codepunkten jenseits von U+10FFFF in Zukunft eine Änderung der CSS-Spezifikation erfordern würde.

Um also ein Leerzeichen nach einem escapeten Zeichen anzuzeigen, verwenden Sie zwei Leerzeichen im Stylesheet -

.breadcrumbs a:before {
  content: '\a0  foo';
}

- oder sie explizit zu machen:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

Siehe CSS 2.1, Abschnitt "4.1.3 Zeichen und Großschreibung" für Details.

Answer 3

Update : PointedEars weist darauf hin, dass die korrekte Bezeichnung für   in allen css-Situationen wäre
'\a0 ' was bedeutet, dass das Leerzeichen ein Abschlusszeichen für die Hex-Zeichenkette ist und von der escapten Sequenz absorbiert wird. Er wies ferner auf Folgendes hin maßgebliche Beschreibung Das klingt nach einer guten Lösung für das Problem, das ich unten beschrieben und behoben habe.

Sie müssen den escapierten Unicode verwenden. Trotz allem, was man Ihnen gesagt hat \00a0 ist kein perfekter Ersatz für   innerhalb von CSS; versuchen Sie es also:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

Speziell mit \0000a0 als   . Wenn Sie versuchen, wie von mathieu und millikin vorgeschlagen:

content:'No\00a0Break'   /* becomes No਋reak */

Es nimmt das B in die hexadezimierten Zeichen auf. Dasselbe geschieht mit 0-9a-fA-F.

Answer 4

In CSS müssen Sie anstelle von HTML-Entities eine Unicode-Escape-Sequenz verwenden. Diese basiert auf dem hexadezimalen Wert eines Zeichens.

Ich habe festgestellt, dass es am einfachsten ist, Symbole in ihre hexadezimalen Entsprechungen umzuwandeln, z. B. von ▾ ( ▾ ) an \25BE ist die Verwendung des Microsoft-Rechners =)

Ja. Aktivieren Sie den Programmierermodus, schalten Sie das Dezimalsystem ein, geben Sie 9662 und wechseln Sie dann zu Hexadezimal und Sie erhalten 25BE . Dann fügen Sie einfach einen Backslash hinzu \ zum Anfang.

Answer 5

Verwenden Sie den Hexadezimalcode für ein nicht umbrechendes Leerzeichen. Etwa so:

.breadcrumbs a:before {
  content: '>\00a0';
}