在 css 中使用 :before 伪类插入特殊字符答案

【问题标题】：Insert special character using :before pseudo class in css在 css 中使用 :before 伪类插入特殊字符
【发布时间】：2011-05-08 00:16:06
【问题描述】：

我在 css 中玩弄 :before 伪类，试图插入一个特殊字符，但结果不是我所希望的。

使用：

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

我得到了我想要的字符，但在它之前有一个 Â 字符并使用：

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

我在 html 页面上得到了完整的&raquo;。

我可以想出几种方法来解决我的问题，但我想知道如果我想使用 :before 伪类，正确的语法是什么。

顺便说一下，我的文档类型是：

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

【问题讨论】：

标签： html css encoding special-characters pseudo-class

【解决方案1】：

试试这个

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

\00BB 是该字符的 unicode 表示。它应该可以正常工作=)

【讨论】：

【解决方案2】：

答案已经说了，但我想参考一下：

我在 html 页面上得到了完整的&raquo;。

这是因为 CSS content 属性不被视为 HTML。它没有附加到 DOM，因此不会解析任何特定于 HTML 的标记。您可以直接插入一个字符：content: "Ԃ"; 或使用 Unicode 表示法：content: "\0504";。

【讨论】：

谢谢，这也解释了为什么我没有在 Firebug 中看到它。
很好的解释，这就是我需要的解决方案。干杯！

【解决方案3】：

尝试指定<meta charset="utf-8">。理想情况下，您希望在服务器中进行设置。

【讨论】：

@Tae - static.medero.org/kak.html 如果页面本身未指定编码，则服务器会指定编码......并且因为他没有明确指定 UTF-8，所以很明显他需要。跨度>
这是一个错误的答案。错误是在 CSS 代码中使用 HTML 实体。你需要转换它们；在这种情况下： Â --> Â(html) --> \00C2 (css)
好吧，你真正想要的是一个转换工具的链接，不是吗？ branah.com/unicode-converter

【解决方案4】：

我知道这个问题被问到已经有一段时间了，但如果现在有人需要它，我找到了解决方案。

Here's 包含大量字形的图表。找到你想要的并复制它的十六进制代码。

然后粘贴here进行转换。

您将获得如下所示的值：\00E1（CSS 值）

将此值粘贴到您的“内容：”上并开心:)

【讨论】：

【解决方案5】：

您的浏览器没有使用正确的文本编码——也就是说，它没有使用与您的编辑器相同的文本编码。如果您从 Web 服务器接收页面，最好的方法是确保服务器发送正确的 Content-Type 标头。如果您无法控制 Web 服务器的标头，或者您将使用本地 HTML 文件进行大量测试，请将 appropriate tags 添加到您正在使用的编码和 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");
?>

不要忘记使用 UTF-8 编码保存任何文件（css、html、php）

【讨论】：

谢谢，当我看到@meder 的回答时，我就这么做了。