html - 如何使用带有::before伪元素的字符代码

Question

我有 <meta charset="UTF-8"> 的 html并希望将黑色右指指针添加到span::before但它不起作用。

如果我只是将 ► 放到 html 中，我会看到指针。但是用content我看到不同的问题。我试试 content: '►'; - 它显示奇怪的符号。

也不行 '&#x25ba' , '\&#x25ba' , '\x25ba' , '\#x25ba' , '\9658'和其他组合。我可以使用背景图像或类似的东西，但我不想这样做。

也许你知道我做错了什么？感谢您的帮助!

Answer 1

► 是右箭头的 unicode

25B6 或 25BA 是右箭头的十六进制

在 CSS 中使用它时需要转义十六进制，参见工作示例

例如

span::before {
  content: '\25B6';
}

#span-2::before {
  content: '\25BA';
}

<meta charset="UTF-8">

<span> Right Pointing Arrow</span>
<br><br>
<span id="span-2"> Another right pointing arrow</span>

<p>&#9658; Unicode Right pointing arrow in HTML</p>