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

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

Это мой код:

h2:after {
    content: " ";
}

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

h2:after {
    content: "-";
}

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

+204
29 мар. '11 в 3:31
источник поделиться
3 ответа

Объяснение

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

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>

Не используйте неразрывные пробелы (U + 00a0). Они должны предотвращать разрывы строк между словами. Они не должны использоваться в качестве несовместимого пространства, что не было бы семантическим.

+44
04 дек. '16 в 21:25
источник

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

Решение:

h2:after {
    content: "\00a0";
}
+459
29 мар. '11 в 3:45
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

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

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

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

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

+9
04 сент. '15 в 18:47
источник

Посмотрите другие вопросы по метке или Задайте вопрос