Добавить пробел (" ") после элемента с помощью: 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;
}