在 css 中的伪内容之前可以添加什么？

Question

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

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

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

Answer 1

如果这是您的要求，您可以通过正常 CSS 修改它。

Answer 2

不知道你到底想知道什么。但是根据你对 Marcus 的回答的评论，我假设你想知道这个代码片段发生了什么

假设我们有一个段落

<p>This is a paragraph</p>

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

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

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

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

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

Answer 3

What exactly is that code inside content ? How can I modify it ?

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

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

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

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

第二部分，[=12=]FE0E 是 'text-style' unicode 变体选择器。基本上，当使用 unicode 图标时，某些浏览器会将图标呈现为表情符号而不是文本。这样做的缺点是表情符号版本不能使用 CSS 设置样式，而文本版本可以。 unicode 变体选择器强制第一部分中指定的图标呈现为文本，以便开发人员随后可以使用 CSS.

设置样式。

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

顺便说一句 - 为了找出所有这些，我所做的只是 google 'content' 的不同部分，并且像往常一样 Google 上帝提供的。

在 css 中的伪内容之前可以添加什么？

What can you put in before pseudo content in css?

html

javascript

css

css-selectors

pseudo-class