CODEWITHSUNDEEP
css
John Boe
John Boe

Reputation: 3621

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?

Upvotes: 2

Views: 426

Answers (1)

Pugazh
Pugazh

Reputation: 9561

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>

Upvotes: 1

Related Questions