Different Font-family For Two Different Parts Of The Same String

.my-link::after { content: 'text \2661'; font-family: Arial,sans-serif; } Looking at the code above I need to set the font-family for the content of the pseudo element.Tha

Solution 1:

Use a combination of before & after to achieve this. Ensure that the pseudos are floating right and they'll end up looking like they're both appearing after the link.

https://jsfiddle.net/zxwkjmt3/

This works assuming your links are 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>

Edit: It's worth noting, avoid thinking of pseudo's as nested elements, they are not. They'll give with a little extra flexibility but they're limited in what you can do, if possible nesting actual elements gives you the most flexibility.