时间戳

首页 > 解决方案 > 你可以在css中的伪内容之前放什么？

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

问题描述

我检查了网站中的一个图标，我注意到它在内容之前的 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;
}

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

标签： javascripthtmlcsscss-selectorspseudo-class

解决方案

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

属性内的代码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 问题： 如何防止 Unicode 字符在 JavaScript 中呈现为 HTML 中的表情符号？

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

推荐阅读