CSS :before content value changing until cache is cleared - html

Question

I have a ul list with chevron bullet points effected by the following css code:
ul li::before {
content : "»";
padding-right: 0.3em;
}
This displays correctly initially; however after a while the bullet points change to ». This is fixed (for a while) by clearing the cache, but the problem will then recur, and I can't for the life of me work out why the extra character is appearing. I have tried content: "\»" and content: "\00bb", but the same problem happens.
This happens in Chrome and I think also Safari, in my local development environment as well as on the live website (http://markfisher.photo - the list in question is at the bottom under "Me elsewhere").
Further Info (Quite confusing, but if you follow you may be able to force the problem to manifest itself in Chrome):
Interestingly, looking at my live website now, even though it displays correctly on the page, upon inspecting the list, Chrome devtools says that the css is actually content: "\»". Refreshing the page with devtools open changes this, so it is then correct both on the page and in Chrome devtools. However, if I open the page (displaying correctly), open Chrome devtools (showing the extra Â) then close devtools and THEN refresh, the extra  displays on the page.
Any ideas would be much appreciated.

Answer 1

http://markfisher.photo/code/css/footer.css, when called directly in the browser, shows it that way already:
div.quick_links ul li::before {
content : "\»";
Switching the encoding explicitly to UTF-8 in the browser however makes it become "\»" then.
Try specifically telling the browser that this stylesheet is encoded in UTF-8, either by making the server add a charset to the Content-Type header, so that it becomes
Content-Type: text/css; charset=UTF-8
or by placing the line
#charset "utf-8";
at the very beginning of your stylesheet.