如何为伪元素内容中同一字符串的不同部分设置不同字体？

Great question! Let's break this down into two clear parts: first, whether pure CSS/Sass can handle this, and second, how to refine your JavaScript approach if needed.

Can we do this with pure CSS/Sass? #

Yes! You don't need JavaScript for this. The trick is using @font-face combined with unicode-range — a CSS feature that lets you limit a font to only apply to specific character ranges. Here's how it works:

1. Define two custom font faces: one for your "text" content (restricted to basic ASCII characters) and one for the heart symbol (restricted to just its Unicode value, U+2661).
2. Stack these custom fonts in your pseudo-element's font-family so the browser picks the right font for each character.

@font-face {
  font-family: 'ArialText';
  src: local('Arial');
  unicode-range: U+0020-007E; /* Covers all basic ASCII characters (like "text") */
}

@font-face {
  font-family: 'HelveticaHeart';
  src: local('Helvetica');
  unicode-range: U+2661; /* Only applies to the heart symbol */
}

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

This works because the browser will check each character against the unicode-range of each font in the stack. The "text" characters fall into the ASCII range, so they use ArialText (your local Arial font), while the heart symbol matches only HelveticaHeart (your local Helvetica font).

If you need a JavaScript fallback/alternative #

Pseudo-elements aren't part of the actual DOM, so you can't directly modify individual characters in their content property. Your initial idea is on the right track, but you'll need to replace the pseudo-element with a real DOM node to style specific characters. Here's a refined approach:

Step-by-step breakdown: #

• Grab the content from the pseudo-element using getComputedStyle.
• Create a real <span> element to replace the pseudo-element.
• Wrap the heart symbol in a nested span with a custom class to apply the Helvetica font.
• Hide the original pseudo-element.

// Loop through all .my-link elements
document.querySelectorAll('.my-link').forEach(link => {
  // Get the pseudo-element's content (note: it comes wrapped in quotes)
  const pseudoContent = window.getComputedStyle(link, '::after').content;
  // Remove the surrounding quotes to get clean text
  const cleanContent = pseudoContent.replace(/^"|"$/g, '');
  // Replace the heart symbol with a span we can style
  const formattedContent = cleanContent.replace(/\u2661/g, '<span class="heart">\u2661</span>');
  
  // Create a new span to hold the formatted content
  const pseudoReplacement = document.createElement('span');
  pseudoReplacement.innerHTML = formattedContent;
  
  // Add the span to the link and hide the original pseudo-element
  link.appendChild(pseudoReplacement);
  link.style.setProperty('--hide-pseudo', 'none');
});

Update your CSS to support this:

.my-link::after {
  content: "text \2661";
  font-family: Arial, sans-serif;
  /* Use a CSS variable to toggle the pseudo-element on/off */
  content: var(--hide-pseudo, "text \2661");
}

/* Style the heart symbol with Helvetica */
.my-link .heart {
  font-family: Helvetica, sans-serif;
}

Final Recommendation #

The CSS unicode-range method is almost always better — it's lightweight, performant, and doesn't rely on JavaScript. Use the JavaScript approach only if you need dynamic content updates, have edge cases with font availability, or need more complex text manipulation beyond character ranges.

内容的提问来源于stack exchange，提问作者user1941537