Добавление объектов HTML с использованием содержимого CSS

Вы должны использовать экранированный юникод:

Нравиться

.breadcrumbs a:before {
    content: '\0000a0';
}

Дополнительная информация на: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS - это не HTML.   - это именованная ссылка на символ в HTML; эквивалент десятичной цифровой символьной ссылки  . 160 - десятичная кодовая точка символа NO-BREAK SPACE в Unicode (или UCS-2; см. Спецификация HTML 4.01). Шестнадцатеричное представление этой кодовой точки - U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰). Вы найдете это в таблицах кодов Unicode и База данных символов.

В CSS вам необходимо использовать escape-последовательность Unicode для таких символов, которая основана на шестнадцатеричном значении кодовой точки символа. Итак, вам нужно написать

.breadcrumbs a:before {
  content: '\a0';
}

Это работает до тех пор, пока escape-последовательность идет последней в строковом значении. Если следуют символы, есть два способа избежать неправильного толкования:

a) (упомянутые другими) Используйте ровно шесть шестнадцатеричных цифр для escape-последовательности:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

б) Добавьте один пробел (например, пробел) после escape-последовательности:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(Поскольку f - шестнадцатеричная цифра, \a0f в противном случае означало бы здесь GURMUKHI LETTER EE или ਏ, если у вас есть подходящий шрифт.)

Разделительный пробел будет проигнорирован, и он будет отображаться  foo, где отображаемое пространство здесь будет символом NO-BREAK SPACE.

Подход с использованием пробелов ('\a0 foo') имеет следующие преимущества перед подходом с шестью цифрами ('\0000a0foo'):

• его легче вводить, потому что начальные нули не нужны, и цифры не нужно считать;
• его легче читать, потому что между escape-последовательностью и последующим текстом есть пробелы, и цифры не нужно подсчитывать;
• он требует меньше места, потому что нули в начале не нужны;
• он совместим снизу вверх, потому что кодовые точки поддержки Unicode за пределами U + 10FFFF в будущем потребуют изменения спецификации CSS.

Таким образом, чтобы отобразить пробел после экранированного символа, используйте два пробела в таблице стилей -

.breadcrumbs a:before {
  content: '\a0  foo';
}

- или сделайте это явным:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

См. CSS 2.1, раздел «4.1.3 Символы и регистр» для подробностей.

Обновление: PointedEars упоминает, что правильной заменой для   во всех ситуациях css будет
'\a0 ', подразумевая, что пробел является ограничителем шестнадцатеричной строки и поглощается экранированной последовательностью. Далее он указал на это авторитетное описание, которое звучит как хорошее решение. к проблеме, которую я описал и исправил ниже.

Что вам нужно сделать, так это использовать экранированный юникод. Несмотря на то, что вам сказали, \00a0 не является идеальной заменой для   в CSS; так что постарайтесь:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

В частности, используя \0000a0 как  . Если вы попробуете, как предложили mathieu и millikin:

content:'No\00a0Break'   /* becomes No਋reak */

Он переводит B в шестнадцатеричные экранированные символы. То же самое происходит с 0-9a-fA-F.

В CSS вам нужно использовать escape-последовательность Unicode вместо HTML Entities. Это основано на шестнадцатеричном значении символа.

Я обнаружил, что самый простой способ преобразовать символы в их шестнадцатеричный эквивалент, например, из ▾ (▾) в \25BE, - это использовать калькулятор Microsoft =)

да. Включите режим программиста, включите десятичную систему, введите 9662, затем переключитесь на шестнадцатеричный, и вы получите 25BE. Затем просто добавьте обратную косую черту \ в начало.

Используйте шестнадцатеричный код для неразрывного пробела. Что-то вроде этого:

.breadcrumbs a:before {
    content: '>\00a0';
}

Есть способ вставить nbsp - откройте CharMap и скопируйте символ 160. Однако в этом случае я бы, вероятно, выделил это отступом, например:

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

Однако вам может потребоваться установить хлебные крошки display:inline-block или что-то в этом роде.

Например :

http://character-code.com/arrows-html-codes.php

Пример: если вы хотите выбрать своего персонажа, я выбрал "& # 8620" "& # x21ac" (мы используем значения HEX).

.breadcrumbs a:before {
    content: '\0021ac';
}

Результат: ↬

Вот и все :)

Я знаю, что это довольно старый пост, но если интервал - это все, что вам нужно, почему бы просто не:

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

Я использовал этот метод раньше. В моем тестировании он отлично сочетается с другими строками с символом ">".

Вот два способа:

• В HTML:

  <div class="ics">&#9969;</div>

Это приведет к ⛱

• В Css:

  .ics::before {content: "\9969;"}

с HTML-кодом <div class="ics"></div>

Это также приводит к ⛱