Search code examples
csssasscss-content

Escaping special chars in CSS "content" property?

I have a menu with country flags and use the CSS content property to add the name of the language.

I.e. like this:

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

This is pretty straightforward, but the problem is that I'm working in a CMS (Shopify) that uses an SCSS stylesheet and every special character (i.e. ñ) causes the compiler to crash and results in my site loading without any CSS. This even happens when the special character is in a comment.

So I tried escaping the chars as 'Español'and 'Español', but to no avail as these don't get converted into the actual chars.

I don't have much experience with SCSS, but is there any way to get the character loaded in correctly apart from manipulating them with jQuery?

Solution

  • You could try using the Unicode value like so:

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

    Which should return the normal Español when used in content as can be seen here: https://jsfiddle.net/42Lhjfof/1/

    You can find these values by looking them up in the Unicode table, like on: http://www.utf8-chartable.de/