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>

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

同一字符串的两个不同部分的字体家族不同

1 个答案: