css - 如何在元素之前放置字符 •::？

Question

这个问题已经有答案了:

Adding HTML entities using CSS content (10 个回答)

已关闭 5 年前。

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

•

•

我所做的一切都是不可见的!

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

和

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

(我什么也没看到)

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

我知道内容只接受文本，但即使这样做我仍然看不到任何内容:

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

如何获取 css ::before出现吗？

(注意:CSS 规则位于页面加载时的默认样式表中，因此它应该应用于任何新元素...)

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

Answer 1

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

让我们了解如何实现它:

我们可以使用content: "•";但由于我们认为要避免使用特殊字符，而应使用其原始 Unicode 表示形式，这样我们就不会陷入 defining @charset "utf-8"; 的困境中。在样式表中并保存。让我们找到这样的十六进制值!

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

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

以上将产生 8226这是我们通常在 HTML 中使用的十进制数值，例如 •要得到 •。 快到了...
现在我们来做:

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

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

获取基数为 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>