同一字符串的两个不同部分的不同字体系列答案

【问题标题】：Different font-family for two different parts of the same string同一字符串的两个不同部分的不同字体系列
【发布时间】：2019-06-19 14:41:50
【问题描述】：

.my-link::after {
    content: "text \2661";
    font-family: Arial,sans-serif;
}

查看上面的代码，我需要为伪元素的内容设置字体系列。这不会有问题。

但我需要将 text 部分的字体系列设置为 Arial，将 \2661 部分的字体系列设置为 Helvetica。

对于同一字符串的不同部分，基本上有两种不同的字体系列。

有没有办法只使用 CSS 或 Sass 来实现这一点？

否则我只能考虑通过CSS将伪元素的整个内容的font-family设置为Arial，然后编写一个JavaScript函数，该函数遍历伪元素内容中的字符串，找到\2661 部分并将其字体系列更改为 Helvetica。

任何建议、想法、提示等将不胜感激。

【问题讨论】：

考虑两个伪元素，还是另一个已经在使用？
JS 不会进入伪类，因此您将无法像您所描述的那样与它进行交互。

标签： javascript css pseudo-element font-family

【解决方案1】：

使用之前和之后的组合来实现这一点。确保伪类是正确浮动的，它们最终看起来就像它们都出现在链接之后。

https://jsfiddle.net/zxwkjmt3/

假设您的链接是display:inline-block;，则此方法有效

.my-link {
  display: inline-block;
}

.my-link::before {
    content: '\2661';
    float: right;
    font-family: Helvetica,sans-serif;
}
.my-link::after {
    content: 'text';
    float: right;
    font-family: Arial,sans-serif;
}

&lt;a href="#" class="my-link"&gt;Link&lt;/a&gt;

编辑：值得注意的是，避免将伪视为嵌套元素，它们不是。它们会提供一些额外的灵活性，但它们的功能有限，如果可能的话，嵌套实际元素会给你最大的灵活性。

【讨论】：