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

Question

我想放一个circle/dot::before一个元素

•

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

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

和

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

（我什么都没看到）

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

我知道内容只接受文本，但我仍然看不到任何内容：

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

如何让 css ::before 出现？

（注意：css 规则采用默认样式 sheet 在页面加载时 因此它应该应用于任何新元素...... )

如何在 ::before 中显示此点？

Answer 1

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

Answer 2

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)
)

得到一个base 16的String，所以Hexadecimal！你会得到 "2022".

CSS

content: "22";

JavaScript

someElement.textContent = "\u2022";

HTML•

&#x2022;

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

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

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

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

How do I put character &#8226 ::before an element?

css

html-entities

css-content

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

CSS

JavaScript

HTML•