如何将字符 &#8226 :: 放在元素之前？ [复制]

Question

我想放一个圆/点::before一个元素

•

•

我所做的一切都是可见的！

.line ::before{
    content:'&#8226';
    }

和

.line ::before{
    content:'•';
    }

（我什么都没看到）

即使只有文字我也无法让它工作

我知道 content 只接受文本，但如果我这样做了，我仍然看不到任何内容：

.line ::before{
    content:'xxx';
    }

如何让 css ::before 出现？

（注意：css 规则在页面加载时的默认样式表中，因此它应该应用于任何新元素...）

如何在::before 中显示这个点？

Answer 1

CSS :before 和 :after 的 content 接受转义的 \ Unicode HEX 表示字符。

让我们学习如何实现它：

我们可以使用content: "•";，但是因为我们被认为要避免特殊字符，而使用它们的原始Unicode表示，这样我们就不会在样式表中陷入defining @charset "utf-8";并保存为这样. 让我们找到这样的 HEX 值！

打开开发者控制台并写入：

"•".charCodeAt(0)               // 8226     ( base10 )

上面将产生8226，这是我们通常在HTML中使用的十进制数字值，如• 来获得•。 快到了……
现在开始吧：

"•".charCodeAt(0).toString(16)  // "2022"   ( base16 )

console.log(
    "•".charCodeAt(0).toString(16)
)

得到一个base 16的字符串，所以十六进制！你会得到"2022"。

CSS

content: "\2022";

JavaScript

someElement.textContent = "\u2022";

HTML •

•

:) 完全正确！您现在可以放弃基于十进制的• 并始终坚持使用HEX 值，只需使用正确的前缀（CSS\、HTML&#x、JS\u）。

---

.line::before{
    content:'\2022';
}

<p class="line"> Lorem</p>

Answer 2

您可以使用 Entity Converter 之类的工具，它将您的点转换为 CSS 可利用的实体：::before { content: '\2022'; }。确保您使用的字体在其字符集中包含该字符，或者您使用支持该字符的备用字体。此外，请确保您将其应用于带有选择器（a、.someclass 等）的特定元素。