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


1014

Как вы используете свойство CSS content для добавления объектов HTML ?

Использование чего-то подобного просто выводит  на экран вместо неразрывного пробела:

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

5
В другом смысле добавление контента с использованием CSS нарушает разделение интересов, CSS предназначен только для определений стилей. Желательно избегать с точки зрения доступности, так как отключение CSS портит всю разметку. Тем не менее, приятно добавлять изображения, используя эту технику.
Questzen

95
Это зависит. В данном случае это для целей презентации. Было бы "нарушать" SoC, чтобы поместить ">" в HTML
mathieu

2
Просто вопрос, как вы думаете, это было бы лучше, как упорядоченный список? Я имею в виду, это список с заказом, не так ли?
Алекс

3
@questzen - я думаю, что вполне приемлемо (и хорошо) использовать CSS :afterдля установки, например, индикатора сортировки asc / desc в отсортированном столбце.
Джош М.

9
Я заметил, что люди сходят с ума по принципу SoC. Боже мой, какой контент для вас является знаком ">" ?! Сжалься! это просто значок в этом контексте, виджет, пуля, вы называете это. Для меня контент - это то, что я хотел бы найти.
user776686

Ответы:


1064

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

подобно

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

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


57
Ведущие нули лишние, см. CSS 2.1: 4.3.7 Строки . '>\a0'достаточно.
PointedEars

18
@dlamblin Кроме того, чтобы избежать символов интерпретируется как часть управляющей последовательности надежно , добавить стандартный бело-пространство: '>\a0 bc'отображается > bc.
PointedEars

18
Мой инструмент amp-what.com/#q=%3E предоставляет режим «CSS». Выберите «css» внизу страницы. Согласно CSS-ссылке выше, они должны быть разделены пробелом, когда они неоднозначны.
NDP

@mathieu Можете ли вы использовать контент для добавления изображения? Просто интересно
weia design

1
@ Adam, нет, если вы хотите добавить изображение, используйте «background-image» и отобразите: inline-block; и ширина: 123px; высота: 123px; (используйте точную ширину / высоту)
Натан JB

177

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

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

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

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

а) (упомянуто другими) Используйте ровно шесть шестнадцатеричных цифр для 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 Символы и регистр» для получения подробной информации.


+1 за уловку «показывать пробел после экранированного символа», но нужно упомянуть, что добавление nbsp, а затем пробела, побеждает цель nbsp;)
TWiStErRob

@TWiStErRob Нет, комбинация неразрывного пробела, за которым следует символ пробела (или наоборот), будет отображать пробел относительно ширины двух пробелов, в то время как два или более дословных пробела будут отображать только пробел ширина одного пробела в качестве синтаксического анализатора механизма компоновки последовательно разбивает пробел (включая символ новой строки) на один пробел, если white-spaceсвойство CSS не объявляет иное.
PointedEars

да, я знаю о свертывании, но смысл nbsp в том, что он неразрывный, символы слова также неразрывны по умолчанию, поэтому добавление пробела рядом с неразрывным не имеет смысла, конечный результат будет ломаясь. Я говорю за white-space: normal.
TWiStErRob

@TWiStErRob Пожалуйста, прочитайте мой ответ более внимательно. Это пример для «отображения пробела после экранированного символа». В исходном коде был NO-BREAK SPACEсимвол, поэтому я использовал для него escape-последовательность. Вы можете выбрать любую другую escape-последовательность; при необходимости вы можете объявить white-space: nowrapтоже.
PointedEars

81

Обновление : 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как  . Если вы попробуете, как предложили Матье и Милликин:

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

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


6
Вам просто нужно поставить пробел после последовательности побега, как указано: '\a0 Break'. '\0000a0Break'это не надежно.
PointedEars

@PointedEars Интересно, тогда это пространство является терминатором и не включается в строку?
Дламблин

2
См. CSS 2.1, раздел «4.1.3 Символы и регистр» . Что также показывает, что ваш подход ДОЛЖЕН быть надежным в соответствии с CSS 2.1. Но я считаю, что подход к пробелам чище (совместим вверх) и имеет меньшую площадь.
PointedEars

47

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

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

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


4
Хотя это абсолютно полезно, на самом деле он не отвечает на вопрос, так что это было бы лучше в качестве комментария к вопросу.
Дламблин

1
Черная стрелка вправо (▸ \25B8 ▸ ▸) ftw. Также см. En.wikipedia.org/wiki/Geometric_Shapes для получения дополнительной информации.
Джоэл Пурра

2Джоэль Пурра, читай Вики больше времени. Вы приняли символы
netgoblin

@netgoblin: как так? Мне просто нравится черная стрелка, направленная вправо.
Джоэл Пурра

1
Я использую этот graphemica.com, где вы можете получить десятичную, шестнадцатеричную и так далее
Майк

34

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

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

17

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

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

Возможно, вам придется установить панировочные сухари display:inline-blockили еще что-нибудь.


4
Вместо того, чтобы вставлять nbsp, я бы остановился на использовании сущности, чтобы будущие сопровождающие поняли, что она отличается от пробела.
Nickf

2
с другой стороны, вы не делаете панировочные сухари, как они должны быть, то есть: символ> должен быть встроен в хлебную крошку, а не просто визуальный стиль. по крайней мере, если вы хотите, чтобы Google видел ваши сухари и перечислил их в списке в поисковой системе.
Дементик

10

Например :

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

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

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

Результат: ↬

Это оно :)


я использовал контент: '\ 10095'; , Но вывод не показывает. вместо значка отображается прямоугольник.
Капил

0

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

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

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


-2

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

  • В HTML:

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

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

  • В Css:

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

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

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


Правильный ответ: .ics :: before {content: '\ 9969';}
Марко Скарнатто
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.