Додайте пробіл ("") після елемента, використовуючи: after

274

Я хочу додати порожній пробіл після деякого вмісту, однак content: " "; , схоже, це не працює.

Це мій код:

h2:after {
    content: " ";
}

... що не працює, однак це робить:

h2:after {
    content: "-";
}

Що я роблю неправильно?

css

— bradley.ayers
джерело

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

— fncomp

Це дивне запитання, ви повинні використовувати padding для додавання простору, без вмісту: після , можливо, ви не знаєте про різницю між дисплеєм: inline та display: block?

— Littlemad

Я намагаюся додати набивання через вміст.

— bradley.ayers

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

— Джо Уоллер

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

— dmitry_romanov

Відповіді:

142

Пояснення

Варто зазначити, що ваш код все-таки вставляє пробіл

h2::after {
  content: " ";
}

Однак його негайно видаляють.

З анонімних вбудованих полів ,

Вміст білого простору, який згодом згортатиметься відповідно до властивості "white-space", не створює анонімних вбудованих полів.

І від моделі обробки «білого простору» ,

Якщо пробіл (U + 0020) в кінці рядка має "пробіл", встановлений на "нормальний", "тепер" або "передрядковий рядок", він також видаляється.

Рішення

Так що, якщо ви не хочете , простір для видалення, встановіть 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

Виявляється, це потрібно вказати за допомогою unicode, що вийшов. Це питання пов'язане і містить відповідь.

Рішення:

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

— bradley.ayers
джерело

Нічого не варто, що це додасть простору, що не порушує. Якщо ви хочете мати звичайний простір, вам потрібно "\ 0020" замість "\ 00A0".

— Offlein

Можливо, варто також зазначити, що додавання нормального простору нічого не призведе. Якщо між текстом у цьому та попереднім елементом немає пробілу, це не додасть жодного. Нормальний простір просто обвалиться в собі.

— mheim

@Offlein, будь ласка, додайте "\ 0020" як окрему відповідь, оскільки деякі шрифти, наприклад, шрифт Awesome не дозволять \00A0відображати пробіл, а якщо вам потрібно пробіл між елементами, а не до або після того, як ви не можете використовувати набивання

— Mousey

Як ви додаєте простір після чогось, що вже є у вмісті?

— vsync

@ FrançoisDupont, чи є у вас ресурс, що описує цю зміну?

— isherwood

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

Закінчилося чимось на кшталт:

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

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

Використовується джерело для геть gt (шеврон). З будь-якої причини "зміст: немає;" створює проблеми вирівнювання на останній плитці.

— дон.аймар
джерело