Добавить пробел (" ") после элемента с помощью: after

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

Это мой код:

h2:after {
    content: " ";
}

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

h2:after {
    content: "-";
}

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

4 ответов


объяснение

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

h2::after {
  content: " ";
}

тем не менее, он немедленно удаляется.

С анонимные инлайн-боксы,

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

и в обработке пробельных' модель,

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

решение

поэтому, если вы не хотите, чтобы пространство было удалено, установите white-space to 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). Они должны предотвращать разрывы между словами. Они не должны использоваться как не-складываемое пространство, это не было бы семантическим.


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

решение:

h2:after {
    content: "a0";
}

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

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

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

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

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


в итоге:

h2:after {
    content: ".................................................................";
    font-size: 1px;
}