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

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';
}

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

.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 ' подразумевая, что пространство является терминатором шестнадцатеричной строки и поглощается беглой последовательностью. Далее он указал на это авторитетное описание, которое звучит как хорошее решение проблемы, которую я описал и зафиксировал ниже.

Что вам нужно сделать, это использовать escape-код unicode. Несмотря на то, что вам сказали, \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 как  . Если вы попробуете, как предложили матье и милликин:

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

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

Я обнаружил, что самый простой способ конвертировать символы, например от ▾ (▾) в \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>

Это также приводит к тому, что