Dodaj spację („”) za elementem, używając: po

274

Chcę dodać puste miejsce po zawartości, jednak content: " ";wydaje się, że nie działa.

To jest mój kod:

h2:after {
    content: " ";
}

... co nie działa, ale to działa:

h2:after {
    content: "-";
}

Co ja robię źle?

css

— bradley.ayers
źródło

Nie rozumiem oczekiwanego rezultatu. Czy próbujesz dodać paddingza pomocą content. Wydaje się, że nie można stwierdzić, czy przestrzeń została dodana.

— fncomp

To dziwne pytanie, należy użyć dopełnienia, aby dodać miejsce, bez zawartości: po , może nie wiesz o różnicy między display: inline i display: block?

— Littlemad

Próbuję dodać dopełnienie za pośrednictwem zawartości.

— bradley.ayers

Odkryłem, że dodanie spacji przy użyciu tej metody było również przydatne, gdy overflow: hiddenelement blokowy odciąłby kilka ostatnich pikseli ostatniego znaku kursywy. Wypełnienie nie pomogłoby w tym przypadku.

— Joe Waller

Wypełnienie nie pomaga, jeśli chcesz podkreślić swoje miejsce za pomocą text-decoration: underline;jednego z nich.

— dmitry_romanov

Odpowiedzi:

142

Wyjaśnienie

Warto zauważyć, że Twój kod wstawia spację

h2::after {
  content: " ";
}

Jednak jest natychmiast usuwany.

Z anonimowych pól śródliniowych ,

Zawartość białych znaków, które następnie zostałyby zwinięte zgodnie z właściwością „białych znaków”, nie generuje żadnych anonimowych pól śródliniowych.

I z modelu przetwarzania „białych znaków” ,

Jeśli spacja (U + 0020) na końcu linii ma „białą spację” ustawioną na „normalną”, „nowrap” lub „przed linią”, jest ona również usuwana.

Rozwiązanie

Więc jeśli nie chcesz, aby przestrzeń została usunięta, ustaw white-spacena prelub 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>

Rozwiń fragment kodu

Nie używaj spacji niełamliwych (U + 00a0). Mają zapobiegać łamaniu linii między słowami. Nie należy ich traktować jako przestrzeni nierozkładalnej, co nie byłoby semantyczne.

— Oriol
źródło

Wygląda na white-spaceto, że nie jest obsługiwany w iE11 ani Edge (patrz caniuse.com/#search=white-space ). czy w związku z tym odpowiedź użytkownika bradley.ayers jest lepsza? (Nie wiem, istnieją inne aspekty, takie jak semantyka lub zachowanie związane z

— łamaniem

561

Okazuje się, że należy to określić za pomocą uciekającego Unicode. To pytanie jest powiązane i zawiera odpowiedź.

Rozwiązanie:

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

— bradley.ayers
źródło

Nic nie warte, że doda to przestrzeń NIEPRZERWAJĄCĄ. Jeśli chcesz normalnego miejsca, potrzebujesz „\ 0020” zamiast „\ 00A0”.

— Offlein

Warto też zauważyć, że dodanie normalnej przestrzeni nic nie da. Jeśli nie ma spacji między tekstem w tym i poprzednim elemencie, to go nie doda. Normalna przestrzeń po prostu zapadnie się w siebie.

— mheim

@Offlein proszę dodać `\ 0020` jako osobną odpowiedź, ponieważ niektóre czcionki, np. Font Awesome nie pozwolą \00A0na wyświetlenie spacji, a jeśli chcesz spacji między elementami zamiast przed lub po nie możesz użyć padding

— Mousey

Jak dodać spację po czymś, co jest już w treści?

— vsync,

@ FrançoisDupont, czy masz zasób opisujący tę zmianę?

— isherwood

Potrzebowałem tego zamiast używania dopełnienia, ponieważ użyłem kontenerów z blokiem wbudowanym, aby wyświetlić serię pojedynczych zdarzeń na osi czasu przepływu pracy. Ostatnie zdarzenie na osi czasu nie wymagało po nim strzałki.

Skończyło się na czymś takim jak:

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

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

Użyto fontawesome dla znaku gt (chevron). Z dowolnego powodu „content: none;” powodowało problemy z wyrównaniem ostatniego kafelka.

— don.aymar
źródło