Fügen Sie nach einem Element ein Leerzeichen ("") ein, indem Sie Folgendes verwenden: after

274

Ich möchte nach einigen Inhalten ein Leerzeichen einfügen, aber das content: " ";scheint nicht zu funktionieren.

Das ist mein Code:

h2:after {
    content: " ";
}

... was nicht funktioniert, aber das funktioniert:

h2:after {
    content: "-";
}

Was mache ich falsch?

css

— bradley.ayers
quelle

Ich verstehe das erwartete Ergebnis nicht. Versuchen Sie , hinzufügen paddingverwenden content. Es scheint unmöglich zu sein zu sagen, ob der Platz hinzugefügt wurde.

— Fncomp

Es ist eine seltsame Frage, Sie sollten Polster verwenden, um Platz hinzuzufügen, keinen Inhalt: Vielleicht wissen Sie danach nicht mehr über den Unterschied zwischen display: inline und display: block Bescheid?

— Littlemad

Ich versuche, Polsterung über Inhalte hinzuzufügen.

— Bradley.ayers

Ich fand, dass das Hinzufügen eines Leerzeichens mit dieser Methode auch nützlich war, wenn overflow: hiddenein Blockelement die letzten Pixel des letzten kursiven Zeichens abschneidet. Polsterung würde in diesem Fall nicht helfen.

— Joe Waller

Das Auffüllen hilft nicht, wenn Sie möchten, dass Ihr Raum mit text-decoration: underline;beiden unterstrichen wird .

— dmitry_romanov

Antworten:

142

Erläuterung

Es ist erwähnenswert, dass Ihr Code ein Leerzeichen einfügt

h2::after {
  content: " ";
}

Es wird jedoch sofort entfernt.

Aus anonymen Inline-Boxen ,

Leerrauminhalte, die anschließend gemäß der Eigenschaft "Leerraum" entfernt werden, erzeugen keine anonymen Inline-Felder.

Und aus dem 'White-Space'-Verarbeitungsmodell ,

Wenn für ein Leerzeichen (U + 0020) am Ende einer Zeile "Leerzeichen" auf "Normal", "Nowrap" oder "Vorzeile" gesetzt ist, wird es ebenfalls entfernt.

Lösung

Wenn Sie also nicht möchten, dass der Speicherplatz entfernt wird, setzen Sie white-spaceauf preoder pre-wrap.

h2 {
  text-decoration: underline;
}
h2.space::after {
  content: " ";
  white-space: pre;
}

<h2>I don't have space:</h2>
<h2 class="space">I have space:</h2>

Erweitern Sie das Snippet

Verwenden Sie keine ununterbrochenen Leerzeichen (U + 00a0). Sie sollen Zeilenumbrüche zwischen Wörtern verhindern. Sie sollen nicht als nicht zusammenklappbarer Raum verwendet werden, das wäre nicht semantisch.

— Oriol
quelle

Es sieht so aus, als würde white-spacees weder in iE11 noch in Edge unterstützt (siehe caniuse.com/#search=white-space ). ist daher die antwort von user bradley.ayers besser? (Ich weiß nicht, es gibt andere Aspekte wie Semantik oder Zeilenumbruchverhalten)

— Chimos

561

Es stellt sich heraus, dass es über Escape-Unicode angegeben werden muss. Diese Frage ist verwandt und enthält die Antwort.

Die Lösung:

h2:after {
    content: "\00a0";
}

— bradley.ayers
quelle

Es ist nichts wert, dass dies einen NICHT BRECHENDEN Raum hinzufügt. Wenn Sie einen normalen Speicherplatz möchten, benötigen Sie "\ 0020" anstelle von "\ 00A0".

— Offlein

Es könnte auch erwähnenswert sein, dass das Hinzufügen eines normalen Leerzeichens nichts bewirkt. Wenn zwischen dem Text in diesem und dem vorhergehenden Element kein Leerzeichen steht, wird kein Leerzeichen hinzugefügt. Ein normaler Raum wird einfach in sich zusammenfallen.

— Mheim

@Offlein Bitte fügen Sie "\ 0020" als separate Antwort hinzu, da einige Schriftarten, z. B. "Font Awesome", kein \00A0Leerzeichen anzeigen können und wenn Sie ein Leerzeichen zwischen Elementen anstatt vor oder nach dem Auffüllen verwenden möchten

— Mousey,

Wie fügt man Platz nach etwas hinzu, das bereits im Inhalt enthalten ist?

— vsync

@ FrançoisDupont, haben Sie eine Ressource, die diese Änderung beschreibt?

— Isherwood

Ich brauchte dies, anstatt Padding zu verwenden, da ich Inline-Block-Container verwendete, um eine Reihe einzelner Ereignisse in einer Workflow-Zeitleiste anzuzeigen. Das letzte Ereignis in der Timeline benötigte keinen Pfeil danach.

Endete mit so etwas wie:

.transaction-tile:after {
  content: "\f105";
}

.transaction-tile:last-child:after {
  content: "\00a0";
}

Verwendet fontawesome für das gt (Chevron) Zeichen. Aus welchem Grund auch immer "Inhalt: keine;" produzierte Ausrichtungsprobleme auf der letzten Kachel.

— don.aymar
quelle