55

私は次のCSSを使用していますが、これは機能しているようです。

a.up:after{content: " ↓";}
a.down:after{content: " ↑";}

ただし、出力はリテラルであり、実際の文字列を示しているため、文字はこのようにエンコードされているようには見えません。

a.up:after{content: " ↓";}
a.down:after{content: " ↑";}

エンコードできない場合は、エンコードをサポートしているため、jQueryで.append（）などを使用する必要があるように感じます。何か案は？

4

3 に答える 3

98

でエンコードされたUnicode文字を使用contentするには、文字自体（使用する場合と同様）、またはHTMLエンティティの代わりにUTF-8エスケープシーケンスを指定する必要があります。

a.up:after { content: " \2193"; }
a.down:after { content: " \2191"; }
于 2011-02-17T14:59:24.700 に答える
13

とにかくそれらの文字をエンコードしたいのはなぜですか？HTMLではなくCSSを書いていることを忘れないでください。あなたのコード：

a.up:after{content: " ↓";}
a.down:after{content: " ↑";}

UTF-8エンコーディングでファイルを保存し、適切なヘッダーを送信する限り、は完全に有効です。

Content-Type: text/css; charset=utf-8

文字のエンコードはHTMLでのみ使用されるため、コンテンツとタグの間にあいまいさはありません。したがって、ブラウザがタグの始まりであると見なさないようにエンコード<します。&lt;のようなもの&darr;は、utf-8の使用方法を知らない（または何らかの理由で使用できない）人々のための単なる商品です:)。

于 2011-02-17T15:13:12.600 に答える
0

ただ、 viaの値を動的に設定したい場合は、上記は機能しないことを追加したいと思います。見るcontentthe attr() function

document.getElementById('wontwork').setAttribute('data-sym', ' \2714 ');
document.getElementById('willwork').setAttribute('data-sym', ' \u2714 ');
button::before {
  content: attr(data-sym);
}
* {
  font-size: 30px
}
<button id='wontwork' data-sym='to-be-replaced'>not rendered</button>
<button id='willwork' data-sym='to-be-replaced'>rendered !</button>

于 2019-09-06T11:20:26.450 に答える