javascript - 同一字符串的两个不同部分的不同字体系列

Question

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

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

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

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

有什么方法可以仅使用 CSS 或 Sass 来实现吗？

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

如有任何建议、想法、提示等，我们将不胜感激。

Answer 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;
}

<a href="#" class="my-link">Link</a>

编辑:值得注意的是，避免将伪元素视为嵌套元素，它们不是。它们会提供一点额外的灵 active ，但它们会限制您的操作，如果可能的话，嵌套实际元素会为您提供最大的灵 active 。