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

274

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

Это мой код:

h2:after {
    content: " ";
}

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

h2:after {
    content: "-";
}

Что я делаю не так?

css

— bradley.ayers
источник

Я не понимаю ожидаемого результата. Вы пытаетесь добавить paddingс помощью content. Кажется, невозможно сказать, было ли добавлено пространство.

— Fncomp

Это странный вопрос, вы должны использовать отступы для добавления пробела, без содержимого: после , может быть, вы не знаете о разнице между display: inline и display: block?

— Littlemad

Я пытаюсь добавить отступ через контент.

— bradley.ayers

Я обнаружил, что добавление пробела с помощью этого метода также полезно, когда overflow: hiddenэлемент блока обрезает последние несколько пикселей последнего символа курсивного текста. Паддинг не поможет в этом случае.

— Джо Уоллер

Padding не поможет, если вы хотите, чтобы ваше пространство было подчеркнуто с помощью text-decoration: underline;любого из них.

— dmitry_romanov

Ответы:

142

объяснение

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

h2::after {
  content: " ";
}

Однако, это немедленно удалено.

Из анонимных встроенных ящиков ,

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

И из модели обработки «белого пространства» ,

Если пробел (U + 0020) в конце строки имеет «пробел», установленный на «нормальный», «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). Они должны предотвращать разрывы строк между словами. Они не должны использоваться как неразборное пространство, это не было бы семантическим.

— Ориоль
источник

Похоже, white-spaceне поддерживается ни в iE11, ни в Edge (см. Caniuse.com/#search=white-space ). поэтому ответ пользователя bradley.ayers лучше? (Я не знаю, есть и другие аспекты, такие как семантика или поведение разрыва строки)

— chimos

561

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

Решение:

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

— bradley.ayers
источник

Ничего не стоит, что это добавит неразрывное пространство. Если вам нужен нормальный пробел, вам нужно "\ 0020" вместо "\ 00A0".

— Offlein

Стоит также отметить, что добавление нормального пробела ничего не даст. Если между этим текстом и предыдущим элементом нет пробелов, он не будет добавлен. Нормальное пространство просто рухнет в себя.

— mheim

@Offlein, пожалуйста, добавьте `\ 0020` в качестве отдельного ответа, потому что некоторые шрифты, например, Font Awesome, не позволяют \00A0отображать пробел, и если вам нужен пробел между элементами, а не до или после того, как вы не можете использовать заполнение

— Mousey

Как добавить пространство после того, что уже есть в содержании?

— vsync

@ FrancoisDupont, есть ли у вас ресурс, описывающий это изменение?

— Ишервуд

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

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

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

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

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

— don.aymar
источник