Добавьте пробел ("") после элемента, используя: after

Я хочу добавить пробел после некоторого содержимого, однако content: " ";, похоже, не работает.

Это мой код:

h2:after {
    content: " ";
}

... который не работает, однако это делает:

h2:after {
    content: "-";
}

Что я делаю неправильно?

Ответ 1

Объяснение

Стоит отметить, что ваш код вставляет пробел

h2::after {
  content: " ";
}

Однако он сразу же удаляется.

От Анонимные встроенные ящики,

Содержание белого пространства, которое впоследствии будет свернуто в соответствии с свойством "white-space" не генерирует никаких анонимные встроенные поля.

И из Модель обработки "белого пространства" ,

Если пространство (U + 0020) в конце строки имеет "белое пространство", установленное в "normal", "nowrap" или "pre-line", он также удаляется.

Решение

Итак, если вы не хотите, чтобы пространство было удалено, установите white-space в pre или 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>

Ответ 2

Оказывается, его нужно указывать с помощью экранированного юникода. Этот вопрос связан и содержит ответ.

Решение:

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

Ответ 3

Мне нужно было это вместо использования прокладки, потому что я использовал контейнеры встроенного блока, чтобы отображать серию отдельных событий на временной шкале рабочего процесса. Последнему событию на временной шкале не понадобилось стрелки после него.

Закончено с чем-то вроде:

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

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

Используется шрифт для символа gt (chevron). По какой-то причине "контент: нет"; создавал проблемы выравнивания на последней плитке.