user1141649 user1141649 - 4 months ago 18
CSS Question

css li content displays wrong characters in UTF-8

I am trying to create style to display arrow on place of li element.

$("html > head").append("<style id=styles>div#panel { position: absolute; border-radius: 3px; font-family:'Arial Black'; font-size:13px; }\n\r" +
"ul li:before { content: \"\00BB \8680\"; }"
+ "</style>\n\r");


What I see are some mishmash characters but not arrow. The page charset is utf-8.

I read this:
http://www.artishock.net/coding/css-list-styling-using-ascii-special-characters/
http://www.w3schools.com/charsets/ref_utf_arrows.asp

How to fix it?

Answer

Try this. Replace content: \"\00BB with content: '\\00BB'.

Working Example:

$(function() {
  $("html > head").append("<style>div#panel{ position: absolute; border-radius: 3px; font-family:'Arial Black'; font-size:13px; } ul { list-style: none; } ul li:before{ content: '\\00BB'; margin-right: 10px; } </style>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>