The Mystery: Styling Text Inside a Single Element Without Spans

Have you ever inspected an e-commerce price tag and noticed formatted text—such as 4.99* with superscript cents—only to open DevTools and find a completely plain HTML element without any <span> or <sup> tags?

<div class="ods-price__value">4.99*</div>

Since standard CSS selectors like ::first-letter or ::first-line cannot target arbitrary substrings like decimal places, how is this rendering magic achieved? The answer lies in advanced web typography features and custom OpenType fonts.

1. The Primary Solution: OpenType Contextual Alternates (GSUB)

The most common and seamless way to render specific characters differently inside a single text node is through OpenType Font Features, specifically Contextual Alternates (calt) or positional substitutions built directly into custom web fonts.

When design systems (such as the one indicated by the ods- class prefix) create proprietary brand fonts, font designers can add custom OpenType glyph substitution rules (GSUB). For instance, the font can be instructed:

  • "Whenever a period is followed by two digits, replace those digits with elevated superscript glyphs."

In CSS, these features are enabled automatically by modern browsers or explicitly targeted using font settings:

.ods-price__value {
  font-family: "CustomBrandFont", sans-serif;
  font-variant-numeric: ordinal;
  font-feature-settings: "calt" 1, "sups" 1;
}

2. Alternative Approaches to Styling Unwrapped Text

While custom OpenType fonts are the cleanest answer for plain text nodes, developers use a few other clever techniques to achieve similar effects:

A. Variable Fonts and Numeric Variants

CSS offers the font-variant-numeric property to control numeric representations without extra tags if the underlying font supports OpenType features like frac (fractions) or numr/dnom (numerators/denominators):

.price-fraction {
  font-variant-numeric: diagonal-fractions;
}

B. Web Components & Shadow DOM

Sometimes, what appears as a simple <div> in top-level inspect mode might be a Custom Element rendering internal markup inside a Shadow Root. While not strictly a single text node, the outer DOM remains clean.

C. Dynamic JavaScript Formatting (The Traditional Way)

If you don't have access to a custom OpenType font, the standard solution is wrapping the decimal portion in a <span> or <sup> tag using JavaScript before rendering:

<!-- Target HTML -->
<div class="price">4.<sup>99*</sup></div>
.price sup {
  font-size: 0.6em;
  vertical-align: super;
}

Summary

When you see individual characters styled differently inside a single, unmodified <div>, you are almost certainly looking at OpenType font features doing contextual glyph substitution. This approach keeps the HTML pristine while delivering high-end typographic control.