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

Question

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

＆安培;＃8226

•

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

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

和

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

（我什么也看不见）

即使只是文字

，我也无法使用它

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

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

如何让css ::before出现？

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

如何在::before？

中显示此点

Answer 1

CSS :before和:after＆＃39; content接受角色的转义\ Unicode HEX 表示。

让我们学习如何实现目标：

我们可以使用content: "•";但是因为我们被认为避免使用特殊字符来支持其原始的 Unicode 表示，这样我们就不会陷入defining @charset "utf-8";在样式表中并保存。 让我们找到这样的十六进制值！

打开开发者控制台并写：

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

以上将会产生8226，这是我们通常在 HTML 中使用的十进制数值，如•来获取•。 差不多......
现在让我们来做：

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

获取基础16 的字符串，所以十六进制！而且你会得到"2022"。

CSS

content: "\2022";

的JavaScript

someElement.textContent = "\u2022";

HTML•

•

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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