CSS Obfuscation Lab / Experiment 02

Price generated by CSS

Here, the actual product price is rendered by a CSS pseudo-element. The price text in the HTML is intentionally wrong.

Demo wireless headphones

Fictional product · no actual purchase available

Price

$9999

CSS obfuscation is ON. The rendered price is $79.50.

What a scraper can inspect

The measurements below come from the live product price above. Switch the obfuscation on or off to see which values change.

element.textContent

element.innerText

getComputedStyle(element, '::before').content

getComputedStyle(element).fontSize

Actual markup

<div class="price is-obfuscated" id="obfuscated-price">$9999</div>

CSS responsible for the trick

.price.is-obfuscated {
  font-size: 0;
}

.price.is-obfuscated::before {
  content: "$79.50";
  display: inline-block;
  font-size: 2.4rem;
}

Try this: open DevTools and inspect the price element. The HTML will still contain $9999, while its ::before pseudo-element produces the visible $79.50. The value returned by getComputedStyle is CSS serialization, not a general-purpose text extractor.

Accessibility warning: This is intentionally a bad pattern for real product information. CSS-generated content is not DOM text, and screen-reader behavior varies across browsers and assistive technologies. Some users may hear the decoy, the generated content, or both. Never conceal essential prices this way on a real store.