How do I substitute a string in CSS without breaking copy paste?

Question

Suppose I have the following code:

(lambda (x) (+ x 1))

I'd like to display it as follows, without changing what actually gets copy-pasted:

(λ (x) (+ x 1))

The aim is to achieve an effect to Emacs' prettify-symbols-mode. This question shows how to hide some text and display something else instead, but display:none elements are not copied, at least in Firefox.

In other words, how can I display prettified source code listings, without breaking copy-paste? Bonus points for pure HTML+CSS.

The best that I could come up with is the following:

/* CSS */
.lambda:after {
    content:"λ";
}

<!-- HTML -->
(<span>
   <span style="position:absolute;left:-3000px;">lambda</span>
   <span class="lambda"></span>
 </span> x (+ x 1))

Is that the right approach?

Answer 1

This works in Chrome and Firefox:

.hide {
  color: transparent;
  display: inline-block;
  width: 0;
}

.lambda:after {
  content:"λ";
}

JSFiddle