你可以在css中的伪内容之前放什么？答案

【问题标题】：What can you put in before pseudo content in css?你可以在css中的伪内容之前放什么？
【发布时间】：2021-10-10 22:19:03
【问题描述】：

我检查了网站中的一个图标，我注意到它在内容之前的 css 中有类似这样的内容：

.c-navi-new-list__category-link--fresh:before {
    content: "\E0B3\00FE0E";
    font-size: 16px;
    font-size: 1.143rem;
    line-height: 1.375;
    color: #a1a3a8;
    margin-left: 4px;
}

内容中的代码到底是什么？如何修改？

【问题讨论】：

标签： javascript html css css-selectors pseudo-class

【解决方案1】：

内容中的代码到底是什么？如何修改？

content: 属性内的代码代表两件事：

第一部分，\E0B3，是一个 UTF-8 字符图标的 CSS 表示。

正如@shafayetmaruf 已经在他的输出链接中显示的那样，该符号是一个矩形框（另请参见：https://utf8-icons.com/utf-8-character-57523）。

要更改正在呈现的符号，您只需将其更改为不同的图标代码（有关其他示例，请参阅https://www.utf8icons.com/）。

第二部分，\00FE0E 是“文本样式”的 unicode 变体选择器。基本上，当使用 unicode 图标时，某些浏览器会将图标呈现为表情符号而不是文本。这样做的缺点是表情符号版本不能使用 CSS 设置样式，而文本版本可以。 unicode 变体选择器强制第一部分中指定的图标呈现为文本，以便开发人员可以使用 CSS 对其进行样式设置。

有关更多信息，请参阅此 SO 问题： How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?

顺便说一句 - 为了找出这一切，我所做的只是用谷歌搜索“内容”的不同部分，并且像往常一样谷歌上帝提供。

【讨论】：

【解决方案2】：

我不知道你到底想知道什么。但是根据您在 Marcus 的回答中的评论，我假设您想知道这段代码 sn-p 发生了什么

假设我们有一个段落

<p>This is a paragraph</p>

现在，如果我们在其上实现您的 css，让我们看看会发生什么：

p::before { 
    content: "\E0B3\00FE0E";
    font-size: 16px;
    font-size: 1.143rem;
    line-height: 1.375;
    color: #a1a3a8;
    margin-left: 4px;
}

输出将是这样的： [输出] https://i.stack.imgur.com/KFQpY.png

现在让我们看看这里每一行的职责是什么：

::"before" - 标签表示我们在段落之前做某事
"content" - 表示我们在段落之前添加了一些内容，在我们的例子中是一个图标。
“font-size” - 表示我们添加的内容的字体大小为10px，后来改为1.143rem（rem是一个测量单位）。
"line-height" - 表示两条线之间的距离
“颜色” - 指图标颜色。
"margin-left" - 表示我们在图标的左侧放置了一些空间。在我们的例子中是 4px。

【讨论】：

【解决方案3】：

如果这是您的要求，您可以通过普通 CSS 对其进行修改。

【讨论】：

我的问题是它是什么，我怎样才能做出这样的东西？