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

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

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

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

Я получаю символ, который я хочу, но с символом & Acirc; перед ним и используя:

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

Я получаю полный » на странице html.

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

Кстати, мой doctype:

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

Ответ 1

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

Ответ 2

попробуйте это

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

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

Ответ 3

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

Я получаю полный » на странице html.

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

Ответ 4

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

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

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

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

Вставьте это значение в свой "контент:" и будьте счастливы:)

Ответ 5

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

Ответ 6

Добавьте это в 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

Ответ 7

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