Добавьте пробел («») после элемента, используя: 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
источник