如何使用 css 的 content 属性添加 html 特殊字符（右箭头）？ [复制]

Posted 2023-02-24

【中文标题】如何使用 css 的 content 属性添加 html 特殊字符（右箭头）？ [复制]

【英文标题】：How to add html special character (right-arrow) using content property of css? [duplicate]

【发布时间】：2013-08-13 17:12:06

【问题描述】：

我正在尝试使用其代码添加 html 特殊字符。当我在我的 div 中使用它时它工作正常，但我如何使用 css 来做到这一点。

我已经尝试如下。

.right-arrow:after 
    content:'&#9658'

DEMO

编辑

Matt Ball 的答案中没有我想要的，因为我想要右箭头的代码，而在那个问题中，只有下箭头的代码。所以它不是重复的。

【问题讨论】：

w3.org/International/questions/qa-escapes

【参考方案1】：

特殊字符与伪元素的作用略有不同。您不能在 CSS 中使用 HTML 实体，但可以使用 Unicode 十六进制转义。这是一个将特殊字符的数值转换为 CSS 值的工具。

http://www.evotech.net/articles/testjsentities.html

例如&#9658 需要是\25BA

工作示例：

http://jsfiddle.net/L6suy/

.right-arrow:after 
    content:'\25BA'

【讨论】：

非常感谢。它真的很好。

只是为了让原因更清楚一点：您不能在 CSS 中使用 HTML 实体，但可以使用 Unicode 十六进制转义

刚刚因为您分享的链接而投了赞成票 :)

@SvenBieder 谢谢，我已将您的建议添加到答案中

我需要一个左箭头。它是 \25C4。这里的其他变体 - codepoints.net/geometric_shapes

【参考方案2】：

<div class="right-arrow">Arrow</div>
.right-arrow:before 
    content:'\25BA';

See Demo Here

【讨论】：

是的，即使我现在有了转换器 :)