Aggiungi uno spazio ("") dopo un elemento usando: after

274

Voglio aggiungere uno spazio vuoto dopo alcuni contenuti, tuttavia content: " ";sembra non funzionare.

Questo è il mio codice:

h2:after {
    content: " ";
}

... che non funziona, tuttavia questo fa:

h2:after {
    content: "-";
}

Che cosa sto facendo di sbagliato?

css

— bradley.ayers
fonte

Non capisco il risultato atteso. Stai provando ad aggiungere paddingusando content. Sembra che sarebbe impossibile dire se lo spazio è stato aggiunto.

— fncomp

È una domanda strana, dovresti usare il padding per aggiungere spazio, nessun contenuto: dopo , forse non sai della differenza tra display: inline e display: block?

— Littlemad,

Sto cercando di aggiungere imbottitura tramite contenuto.

— Brady.ayers

Ho scoperto che l'aggiunta di uno spazio usando questo metodo è stata utile anche quando overflow: hiddenun elemento a blocchi avrebbe tagliato gli ultimi pixel dell'ultimo carattere del testo in corsivo. L'imbottitura non sarebbe d'aiuto in questo caso.

— Joe Waller,

Il riempimento non aiuta se vuoi che il tuo spazio sia sottolineato usando text-decoration: underline;entrambi.

— dmitry_romanov

Risposte:

142

Spiegazione

Vale la pena notare che il codice inserisce uno spazio

h2::after {
  content: " ";
}

Tuttavia, viene immediatamente rimosso.

Da caselle incorporate anonime ,

Il contenuto di spazi bianchi che successivamente verrebbero eliminati in base alla proprietà "spazio bianco" non genera caselle incorporate anonime.

E dal modello di elaborazione "spazi bianchi" ,

Se uno spazio (U + 0020) alla fine di una linea ha 'spazio bianco' impostato su 'normale', 'nowrap' o 'pre-linea', viene anche rimosso.

Soluzione

Quindi, se non si desidera rimuovere lo spazio, impostare white-spacesu preo 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>

Espandi frammento

Non utilizzare spazi non interruttori (U + 00a0). Dovrebbero impedire le interruzioni di riga tra le parole. Non dovrebbero essere usati come spazio non pieghevole, che non sarebbe semantico.

— Oriol
fonte

Sembra che white-spacenon sia supportato in iE11 né Edge (vedi caniuse.com/#search=white-space ). è quindi migliore la risposta dell'utente bradley.ayers? (Non lo so, ci sono altri aspetti come la semantica o il comportamento di interruzione di riga)

— chimos

561

Si scopre che deve essere specificato tramite Unicode con escape. Questa domanda è correlata e contiene la risposta.

La soluzione:

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

— bradley.ayers
fonte

Non vale la pena che questo aggiunga uno spazio NON-BREAKING. Se si desidera uno spazio normale, è necessario "\ 0020" anziché "\ 00A0".

— Offlein,

Vale anche la pena notare che l'aggiunta di uno spazio normale non farà nulla. Se non ci sono spazi bianchi tra il testo in questo e l'elemento precedente, questo non ne aggiungerà uno. Uno spazio normale crollerà in se stesso.

— mheim,

@Offlein aggiungi `\ 0020` come risposta separata perché alcuni caratteri, ad esempio Font Awesome non ti permetteranno \00A0di visualizzare uno spazio, e se vuoi uno spazio tra gli elementi piuttosto che prima o dopo non puoi usare il padding

— Mousey

Come si aggiunge spazio dopo qualcosa che è già nel contenuto?

— vsync,

@ FrançoisDupont, hai una risorsa che descrive questo cambiamento?

— Isherwood,

Ne avevo bisogno invece di usare il padding perché ho usato i contenitori inline-block per visualizzare una serie di singoli eventi in una sequenza temporale del flusso di lavoro. L'ultimo evento nella sequenza temporale non ha richiesto alcuna freccia dopo di esso.

Finito con qualcosa del tipo:

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

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

Usato fontawesome per il personaggio gt (chevron). Per qualunque motivo "content: none;" stava producendo problemi di allineamento sull'ultima tessera.

— don.aymar
fonte