Я использую следующий CSS, который, кажется, работает:
a.up:after{content: " ↓";}
a.down:after{content: " ↑";}
Символы, однако, не могут быть закодированы таким образом, поскольку вывод является буквальным и показывает фактическую строку:
a.up:after{content: " ↓";}
a.down:after{content: " ↑";}
Если я не могу закодировать его, мне кажется, что я должен использовать что-то вроде .append() в jQuery, поскольку это поддерживает кодировку. Любые идеи?
Чтобы использовать кодированные символы Unicode в content, вам нужно предоставить либо сами символы (как и вы), либо их escape-последовательности UTF-8 вместо объектов HTML:
a.up:after { content: " \2193"; }
a.down:after { content: " \2191"; }
Почему вы все равно хотите кодировать эти символы? Помните, вы пишете CSS, а не HTML. Ваш код:
a.up:after{content: " ↓";}
a.down:after{content: " ↑";}
является абсолютно допустимым, если вы сохраняете файл с кодировкой UTF-8 и отправляете соответствующий заголовок:
Content-Type: text/css; charset=utf-8
Кодирующие символы используются только в HTML, поэтому нет никакой двусмысленности между контентом и тегами. Таким образом, вы кодируете < как <, чтобы браузер не считал это началом тега. Такие вещи, как ↓, являются просто товарами для людей, которые не знают, как использовать utf-8 (или не могут по какой-либо причине):).
Просто хочу добавить, что если вы хотите динамически установить значение content через the attr() function, вышеприведенное не сработает. См
document.getElementById('wontwork').setAttribute('data-sym', ' \2714 ');
document.getElementById('willwork').setAttribute('data-sym', ' \u2714 ');button::before {
content: attr(data-sym);
}
* {
font-size: 30px
}<button id='wontwork' data-sym='to-be-replaced'>not rendered</button>
<button id='willwork' data-sym='to-be-replaced'>rendered !</button>