CSS: Wie füge ich Leerzeichen vor dem Inhalt des Elements hinzu?

118

Keiner der folgenden Codes funktioniert: 

p:before { content: " "; }
p:before { content: " "; }

Wie füge ich Leerzeichen vor dem Inhalt des Elements hinzu?

Hinweis: Ich muss den Rand links und den Rand links für die semantische Verwendung einfärben und den Raum als farblosen Rand verwenden. :) :)

css unicode space css-content Hugolpz
quelle
5
Warum nicht einfach einen einfachen Rand hinzufügen?
Cam
5
Möglicherweise, weil Rand / Polster den gesamten Block betreffen. Text-Einzug wäre eine bessere Wahl
schöner Arsch
Ich muss den linken Rand und den linken Rand für die semantische Verwendung einfärben :) Ich kann auch mehrere hinzufügen element:before { content:"[a kind of space]"; background: mycolor;}. Auf alle Arten wollte ich wissen, wie man Räume hinzufügt, ein bisschen Spaß!
Hugolpz
1
@Hugolpz: Du könntest im Grunde das Gleiche mit machen p:first-letter { border-left: 1ex solid mycolor; }.
CHao
@ Carn Ränder sind statisch, Raumbreite ist relativ zur Schriftgröße
Nicht geliebt

Antworten:

248

Sie können den Unicode eines nicht unterbrechenden Leerzeichens verwenden:

p:before { content: "\00a0 "; }

Siehe JSfiddle-Demo

[Stil verbessert von @Jason Sperske]

Hugolpz
quelle
2
Ich habe eine leichte Änderung vorgenommen, damit Sie sehen können, wie sie wirkt: jsfiddle.net/uMFHH/3 (ansonsten sieht es nur wie ein Rand aus, was eine gute Frage
aufwirft
Weil ich den Rand links und den Rand links
färben muss
3
Warum der Raum am Ende "\00a0 "? Ist das notwendig oder können wir es einfach tun "\00a0"?
27.
1
@jbyrd: nicht erforderlich (siehe jsfiddle.net/nhyw6e9q ). Ich habe es dort gelassen, um zu zeigen, dass normaler Raum nicht berücksichtigt wird.
Hugolpz
40

Furz nicht mit Leerzeichen. Zum einen wissen ältere Versionen von IE nicht, wovon Sie sprechen. Abgesehen davon gibt es im Allgemeinen sauberere Wege.

Verwenden Sie für farblose Einrückungen die text-indentEigenschaft.

p { text-indent: 1em; }

JSFiddle-Demo

Bearbeiten:

Wenn Sie möchten, dass der Raum farbig ist, können Sie dem ersten Buchstaben einen dicken linken Rand hinzufügen. (Ich würde fast, aber nicht ganz "stattdessen" sagen, da der Einzug ein Problem sein kann, wenn Sie beide verwenden. Aber es fühlt sich für mich schmutzig an, sich nur auf die Grenze zum Einrücken zu verlassen.) Sie können angeben, wie weit entfernt und wie breit die Farbe den linken Rand / die Auffüllung / die Randbreite des ersten Buchstabens verwendet.

p:first-letter { border-left: 1em solid red; }

Demo

cHao
quelle
2
Wenn Sie IE <8 nicht mehr unterstützen, funktioniert diese Methode, während dies vor / nach Pseudoelementen nicht funktioniert.
Cimmanon
1
@ Cimmanon: Ja. Nach MDN funktioniert dies auch in IE 3 (obwohl ich sie gar nicht bewusst , hatte CSS damals: P).
CHao
Sie können eine Einrückung wie z { text-indent: 1em; }. Aber wir können einen Raum wie diesen färben :before {content: "\00a0 "; background: #000; }. Siehe Fiddle
Hugolpz
1
@Hugolpz: Ein Text-Einzug? Nee. kann das nicht anders färben, AFAIK. Aber eine Grenze? Sicher. :)
CHao
Oh, wir können nicht mehrere Inhalte hinzufügen, siehe Fiddle . Schade ...
Hugolpz
8

Da Sie Platz zwischen Elementen hinzufügen möchten, benötigen Sie möglicherweise etwas so Einfaches wie einen Rand links oder einen Abstand links. Hier sind Beispiele für beide http://jsfiddle.net/BGHqn/3/

Dadurch werden links vom Absatzelement 10 Pixel hinzugefügt

p {
    margin-left: 10px;
 }

oder wenn Sie nur eine Auffüllung innerhalb Ihres Absatzelements wünschen

p {
    padding-left: 10px;
}
Matt
quelle
5 
/* Most Accurate Setting if you only want
   to do this with CSS Pseudo Element */
p:before { 
   content: "\00a0";
   padding-right: 5px; /* If you need more space b/w contents */
}
Piyush
quelle