2010-11-10 5 views
21

Я играл с псевдонимом :before в css, пытаясь вставить специальный символ, но результат не тот, на что я надеялся.Вставить специальный символ, используя: до псевдо класса в css

Использование:

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

я получаю характер я хочу, но с Â характера перед ним и использованием:

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

я получаю полную » на странице HTML.

Я могу придумать пару способов решить мою проблему, но мне было интересно, какой будет правильный синтаксис, если я захочу использовать псевдокласс класса :before.

Кстати, мой доктайп является:

<!doctype html> 
<html lang="en"> 

ответ

13

Попробуйте указать <meta charset="utf-8">. В идеале вы хотите установить это на сервере.

+0

HTML5 является UTF-8 по умолчанию. – Tae

+0

@Tae - http://static.medero.org/kak.html сервер диктует кодировку, если она не указана в самой странице ... и поскольку он явно не указал UTF-8, очевидно, что он должен , –

+0

Спасибо, это была действительно ошибка в метатеге, она была установлена ​​в ISO что-то ... – jeroen

2

Ваш браузер не использует правильную текстовую кодировку, то есть не использует ту же текстовую кодировку, что и ваш редактор. Если вы получаете страницу с веб-сервера, лучший подход - убедиться, что сервер отправляет правильный заголовок Content-Type. Если у вас нет контроля над заголовками веб-сервера или если вы будете проводить много тестирования с использованием локальных HTML-файлов, добавьте appropriate tags к вашему документу для кодировки и используемой вами HTML-версии. Я рекомендую использовать UTF-8. Файл CSS (если он отличается от HTML) должен использовать ту же кодировку.

35

попробовать это

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

\ 00BB является юникода представление этого символа. Он должен разумно работает =)

1

Добавить это на HTML, внутри <head> секции

<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"); 
?> 

И не забудьте сохранить любой файл (css, html, php) с кодировкой UTF-8

+0

Спасибо, вот что я сделал, когда увидел ответ @ meder. – jeroen

0

Вы должны быть уверены, что все ваши файлы (CSS и HTML) имеют одинаковую кодировку.

16

Ответ уже было сказано, но я хочу обратиться к:

я получаю полную &raquo; на странице HTML.

Это потому, что свойство CSS content не рассматривается как HTML. Он не добавляется к DOM, поэтому любая разметка HTML не анализируется. Вы можете вставить символ напрямую: content: "Ԃ"; или использовать Unicode нотацию: content: "\0504";.

+0

Спасибо, это объясняет, почему я не видел его в Firebug. – jeroen

+0

Хорошее объяснение, это было решение, в котором я нуждался. Ура! –

5

Я знаю, что прошло какое-то время, так как этот вопрос был задан, но если кому-то это понадобится в настоящее время, я нашел решение для него.

Here's диаграмма с большим количеством глифов. Найдите тот, который вы хотите, и скопируйте для него шестнадцатеричный код.

Затем вставьте его here для преобразования.

Вы получите значение, которое выглядит следующим образом: \ 00E1 (CSS Value)

Вставить это значение на 'Содержание:' и быть счастливым :)