css li content displays wrong characters in UTF-8 -
i trying create style 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 see mishmash characters not arrow. page charset 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 fix it?
try this. replace content: \"\00bb
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>
Comments
Post a Comment