web-dev-qa-db-ja.com

CSSで：before擬似クラスを使用して特殊文字を挿入します

私は:before cssの擬似クラス、特殊文字を挿入しようとしましたが、結果は私が望んでいたものではありません。

を使用して：

.read_more:before {
    content: "»";
    margin-right: 6px;
}

必要な文字を取得しますが、その前にÂ文字を使用して、以下を使用します。

.read_more:before {
    content: "»";
    margin-right: 6px;
}

完全な» HTMLページ。

私は自分の問題を解決するいくつかの方法を考えることができますが、:before擬似クラス。

ところで、私のdoctypeは次のとおりです。

<!doctype html>
<html lang="en">
htmlcssencodingspecial-characterspseudo-class
31
jeroen

<meta charset="utf-8">を指定してみてください。理想的には、サーバーでこれを設定する必要があります。

14
meder omuraliev

これを試して

.read_more:before {
    content: "\00BB";
    margin-right: 6px;
}

\ 00BBは、その文字のUnicode表現です。合理的に動作するはずです=）

48
fcalderan

答えはすでに述べていますが、私は参照したいと思います：

完全な&raquo; HTMLページ。

これは、CSS contentプロパティがHTMLとして扱われないためです。 DOMには追加されないため、HTML固有のマークアップは解析されません。文字を直接挿入できます：content: "Ԃ";またはUnicode表記を使用：content: "\0504";。

20
Crozin

この質問が出されてからしばらく経ちましたが、最近誰かがそれを必要とするかもしれない場合に備えて、その解決策を見つけました。

ここにあります 多数のグリフを含むチャート。必要なものを見つけて、そのための16進コードをコピーします。

それを貼り付けて here に変換します。

次のような値を取得します。\ 00E1（CSS値）

この値を「content：」に貼り付けてください:)

7
Andre Lopes

ブラウザは正しいテキストエンコーディングを使用していません。つまり、エディタと同じテキストエンコーディングを使用していません。 Webサーバーからページを受信して​​いる場合、最善の方法は、サーバーが適切なContent-Typeヘッダーを送信していることを確認することです。 Webサーバーのヘッダーを制御できない場合、またはローカルHTMLファイルを使用して多くのテストを行う場合は、使用しているエンコーディングとHTMLバージョンのドキュメントに 適切なタグ を追加します。 UTF-8の使用をお勧めします。 CSSファイル（HTMLとは別の場合）は、同じエンコードを使用する必要があります。

2
kindall

これを<head>セクション内のhtmlに追加します

<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8" />

ただし、HTMLページがPHPでコーディングされている場合は、次のようにします。

<?php
    header("Content-Encoding: utf-8");
    header("Content-type: text/html; charset=utf-8");
?>

また、UTF-8エンコーディングでファイル（css、html、php）を保存することを忘れないでください

1
Omiod

すべてのファイル（CSSおよびHTML）が同じエンコーディングを持っていることを確認する必要があります。

0
Tae