Html 使用 :before 在 css 中的伪类插入特殊字符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4146933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert special character using :before pseudo class in css
提问by jeroen
I was toying around with the :beforepseudo class in css, trying to insert a special character but the result is not what I was hoping for.
我:before在 css 中玩弄伪类，试图插入一个特殊字符，但结果不是我所希望的。
Using:
使用：
.read_more:before {
content: "?";
margin-right: 6px;
}
I get the character I want, but with an Âcharacter before it and using:
我得到了我想要的字符，但在它之前有一个Â字符并使用：
.read_more:before {
content: "»";
margin-right: 6px;
}
I get the complete »on the html page.
我»在 html 页面上得到了完整的信息。
I can think of a couple of ways to solve my problem, but I was wondering what the correct syntax would be if I wanted to use the :beforepseudo class.
我可以想到几种方法来解决我的问题，但我想知道如果我想使用:before伪类，正确的语法是什么。
By the way, my doctype is:
顺便说一句，我的文档类型是：
<!doctype html>
<html lang="en">
采纳答案by meder omuraliev
Try specifying <meta charset="utf-8">. Ideally you want to set this in the server.
尝试指定<meta charset="utf-8">. 理想情况下，您希望在服务器中设置它。
回答by
try this
尝试这个
.read_more:before {
content: "<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8" />
BB";
margin-right: 6px;
}
\00BB is the unicode representation of that character. It should reasonably works =)
\00BB 是该字符的 unicode 表示。它应该合理地工作 =)
回答by Crozin
The answer has been already told, but I want to refer to:
答案已经说了，但我想参考：
I get the complete
»on the html page.
我
»在 html 页面上得到了完整的信息。
That's because CSS contentproperty isn't treated as HTML. It's not appended to the DOM, therefore any HTML-specific markup isn't parsed. You can insert a character directly: content: "?";or use Unicode notation: content: "\0504";.
这是因为 CSScontent属性不被视为 HTML。它不会附加到 DOM，因此不会解析任何特定于 HTML 的标记。您可以直接插入字符：content: "?";或使用 Unicode 表示法：content: "\0504";。
回答by Andre Lopes
I know it's been a while since this question was asked but in case someone might need it nowadays, I found the solution for it.
我知道这个问题已经有一段时间了，但如果有人现在可能需要它，我找到了解决方案。
Here'sa chart with lots of glyphs. Find the one you want and copy the hex code for it.
这是一个包含大量字形的图表。找到你想要的并复制它的十六进制代码。
Then paste it hereto convert.
然后将其粘贴到此处进行转换。
You'll get a value that looks like this: \00E1 (CSS Value)
你会得到一个如下所示的值：\00E1 (CSS Value)
Paste this value on your 'content:' and be happy :)
将此值粘贴到您的“内容：”上并感到高兴:)
回答by kindall
Your browser isn't using the correct text encoding -- that is, it isn't using the same text encoding as your editor. If you are receiving the page from a Web server, the best approach is to make sure the server is sending the proper Content-Type header. If you don't have control over the Web server's headers, or if you will be doing a lot of testing using local HTML files, add appropriate tagsto your document for the encoding and HTML version you are using. I recommend using UTF-8. The CSS file (if it is separate from the HTML) should use the same encoding.
您的浏览器没有使用正确的文本编码——也就是说，它没有使用与您的编辑器相同的文本编码。如果您从 Web 服务器接收页面，最好的方法是确保服务器发送正确的 Content-Type 标头。如果您无法控制 Web 服务器的标头，或者您将使用本地 HTML 文件进行大量测试，请为您使用的编码和 HTML 版本向文档添加适当的标签。我建议使用 UTF-8。CSS 文件（如果它与 HTML 分开）应该使用相同的编码。
回答by Omiod
Add this on the html, inside the <head>section
将此添加到 html<head>部分内
<?php
header("Content-Encoding: utf-8");
header("Content-type: text/html; charset=utf-8");
?>
But if the html page is coded in PHP, I would prefer the following:
但如果 html 页面是用 PHP 编码的，我更喜欢以下内容：
##代码##And don't forget to save any file (css, html, php) with UTF-8 encoding
并且不要忘记使用 UTF-8 编码保存任何文件（css、html、php）
