CSS Obfuscation Lab / Experiment 05

Layered CSS obfuscation

One price combines Flexbox reordering, a nested CSS pseudo-element, invisible decoy digits, and bidirectional text. Can a generic text extractor reconstruct what the browser displays?

Demo mechanical keyboard

Fictional product · no actual purchase available

Displayed price

.560978

Obfuscation is ON. The browser displays $79.50.

Live extraction results

All readings below come from the actual price element above. Toggle obfuscation to compare the raw DOM against the browser rendering.

textContent

innerText

Root ::before content

Nested ::before content

Flexbox order (whole / fraction)

Computed unicode-bidi on the digits

Actual price markup (simplified)

<div class="price is-obfuscated">
  <span class="price__fraction">
    .5<span class="decoy decoy--font">6</span>0
  </span>
  <span class="price__whole">
    <span class="price__currency"></span>
    <span class="price__digits">97</span>
    <span class="decoy decoy--opacity">8</span>
  </span>
</div>

The example above is formatted for readability. The live price markup contains no formatting whitespace between its fragments.

CSS responsible for the tricks

.price.is-obfuscated .price__fraction { order: 2; }
.price.is-obfuscated .price__whole { order: 1; }

.price.is-obfuscated .price__currency::before {
  content: "$";
}

.price.is-obfuscated .price__digits {
  direction: rtl;
  unicode-bidi: bidi-override;
}

.price.is-obfuscated .decoy--opacity {
  position: absolute;
  opacity: 0;
}

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

Key observation: A geometry-based extractor can recover the visible DOM digits but still miss the dollar sign. It comes from a nested pseudo-element, not from a text node or the root element's own pseudo-elements.

Accessibility warning: This deliberately adversarial price is unsuitable for real product pages. Visual ordering differs from DOM reading order, and CSS-generated symbols may not be exposed consistently to assistive technologies.