Додавання об'єктів HTML за допомогою вмісту CSS

Як ви використовуєте властивість CSS content для додавання об'єктів HTML ?

Використовуючи щось подібне, просто друкується   на екран замість нерозривного простору:

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

Ви повинні використовувати униклий унікод:

Подібно до

.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 Specification ). Шестнадцяткове подання цієї кодової точки дорівнює U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Ви знайдете це у кодах діаграм та базі символів Unicode .

У CSS для таких символів потрібно використовувати послідовність виходу Unicode, яка базується на шістнадцятковому значенні точки коду символу. Тому потрібно писати

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

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

а) (згадується іншими) Використовуйте рівно шість шістнадцяткових цифр для послідовності втечі:

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

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

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

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

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

Підхід білого простору ( '\a0 foo') має такі переваги перед шестизначним підходом ( '\0000a0foo'):

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

Що вам потрібно зробити, це використовувати уникнутий 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як  . Якщо ви спробуєте, як пропонують mathieu and millikin:

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

Це переводить B в шістнадцяткових символів, що втекли. Те саме відбувається з 0-9a-fA-F.

У CSS потрібно використовувати послідовність виходу Unicode замість HTML-об'єктів. Це ґрунтується на шістнадцятковому значенні символу.

Я виявив, що найпростішим способом перетворення символу в їх шістнадцятковий еквівалент є, наприклад, від ▾ ( ▾) до\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>

Це також призводить до ⛱