CSSのコンテンツがUTF-8で間違った文字を表示する

Question

li要素の場所に矢印を表示するスタイルを作成しようとしています。

$("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"); 

私が見るものは、いくつかのミッシュマッシュ文字ですが、矢印はありません。ページの文字セットはutf-8です。

私はこれを読んで： http://www.artishock.net/coding/css-list-styling-using-ascii-special-characters/ http://www.w3schools.com/charsets/ref_utf_arrows.asp

それを修正する方法は？

Answer 1

これを試してください。 content: \"\00BBをcontent: '\\00BB'に置き換えてください。

実施例：

$(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>