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

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?

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>

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.

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";
}

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.