Adicione um espaço (“”) após um elemento usando: after

274

Quero adicionar um espaço em branco após algum conteúdo, no entanto, content: " ";isso não parece funcionar.

Este é o meu código:

h2:after {
    content: " ";
}

... o que não funciona, no entanto:

h2:after {
    content: "-";
}

O que estou fazendo de errado?

css

— bradley.ayers
fonte

Eu não entendo o resultado esperado. Você está tentando adicionar paddingusando content. Parece que seria impossível dizer se o espaço foi adicionado.

— Fncomp 29/03

É uma pergunta estranha, você deve usar preenchimento para adicionar espaço, sem conteúdo: depois , talvez você não saiba a diferença entre display: inline e display: block?

— Littlemad

Estou tentando adicionar preenchimento via conteúdo.

— Bradley.ayers 29/03

Descobri que adicionar um espaço usando esse método também era útil quando overflow: hiddenum elemento de bloco cortava os últimos pixels do último caractere do texto em itálico. O preenchimento não ajudaria neste caso.

— Joe Waller

O preenchimento não ajuda se você deseja sublinhar seu espaço usando text-decoration: underline;qualquer um.

— Dmitry_romanov 4/14

Respostas:

142

Explicação

Vale a pena notar que seu código insere um espaço

h2::after {
  content: " ";
}

No entanto, é imediatamente removido.

Nas caixas embutidas anônimas ,

O conteúdo do espaço em branco que seria recolhido posteriormente de acordo com a propriedade 'espaço em branco' não gera caixas inline anônimas.

E do modelo de processamento 'espaço em branco' ,

Se um espaço (U + 0020) no final de uma linha tiver 'espaço em branco' definido como 'normal', 'nowrap' ou 'pré-linha', ele também será removido.

Solução

Portanto, se você não deseja que o espaço seja removido, defina white-spacecomo preou 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>

Expandir snippet

Não use espaços sem quebra (U + 00a0). Eles devem impedir quebras de linha entre as palavras. Eles não devem ser usados como espaço não recolhível, que não seria semântico.

— Oriol
fonte

Parece que white-spacenão há suporte no iE11 nem no Edge (consulte caniuse.com/#search=white-space ). é, portanto, a resposta do usuário bradley.ayers melhor? (Eu não sei, existem outros aspectos como semântica ou comportamento de quebra de linha)

— Chimos

561

Acontece que ele precisa ser especificado via unicode de escape. Esta pergunta está relacionada e contém a resposta.

A solução:

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

— bradley.ayers
fonte

Não vale nada, pois isso adicionará um espaço NON-BREAKING. Se você deseja um espaço normal, precisa de "\ 0020" em vez de "\ 00A0".

— Offlein

Também vale a pena notar que adicionar um espaço normal não fará nada. Se você não tiver espaço em branco entre o texto neste e o elemento anterior, isso não adicionará um. Um espaço normal entrará em colapso.

— Md

@Offlein, adicione `\ 0020` como uma resposta separada, porque algumas fontes, por exemplo, Font Awesome não permitirão \00A0exibir um espaço, e se você quiser um espaço entre os elementos em vez de antes ou depois de não poder usar o preenchimento

— Mousey

Como você adiciona espaço depois de algo que já está no conteúdo?

— vsync

@ FrançoisDupont, você tem um recurso que descreve essa alteração?

— Isherwood

Eu precisava disso em vez de usar preenchimento porque usei contêineres de bloco embutido para exibir uma série de eventos individuais em uma linha do tempo do fluxo de trabalho. O último evento na linha do tempo não precisou de seta após ele.

Terminou com algo como:

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

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

Usado fontawesome para o personagem gt (chevron). Por qualquer motivo "conteúdo: nenhum;" estava produzindo problemas de alinhamento no último bloco.

— don.aymar
fonte