Экранирование специальных символов в свойстве CSS "content"?

Question

У меня есть меню с флагами стран и я использую свойство контента CSS, чтобы добавить название языка.

Т.е. так:

a.flags::after {
    content: 'Español';
}

Это довольно просто, но проблема в том, что я работаю в CMS (Shopify), которая использует таблицу стилей SCSS, и каждый специальный символ (т. Е.) Вызывает сбой компилятора и приводит к загрузке моего сайта без какого-либо CSS. Это даже происходит, когда специальный комментарий находится в комментарии.

Поэтому я попытался избежать символов как 'Español'а также 'Español', но безрезультатно, поскольку они не превращаются в настоящие символы.

У меня нет большого опыта работы с SCSS, но есть ли способ правильно загрузить символ, кроме как манипулировать им с помощью jQuery?

Answer 1

Вы можете попробовать использовать значение Unicode следующим образом:

a.flags::after {
    content:"Espa\00F1ol";
}

Который должен возвращать нормальный Español при использовании в контенте, как можно увидеть здесь: https://jsfiddle.net/42Lhjfof/1/

Вы можете найти эти значения, посмотрев их в таблице Unicode, например: http://www.utf8-chartable.de/