How to replace a string in CSS without breaking the copy?

Question

Suppose I have the following code:

(lambda (x) (+ x 1))

I would like to display it as follows without changing what actually gets copied:

(λ (x) (+ x 1))

The goal is to achieve the effect of Emacs prettify-symbols-mode. This question shows how to hide some text and display something else, but display:nonenot copied, at least in Firefox.

In other words, how can I display lists of remote source codes without violating copy-paste? Bonus points for pure HTML + CSS.

The best 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 this the right approach?

Answer 1

Chrome Firefox:

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

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

JSFiddle

Answer 2

:

.lambda {
  font-size: 0;
}
.lambda:after {
  content: "λ";
  font-size: 16px;
  /* reset font */
}

(<span>
   <span class="lambda">lambda</span>
</span>x (+ x 1))

Hide result

Answer 3

CSS content 3 suggests you contentshould apply to elements as well. Then, if browsers decide to implement this behavior, you can use

.lambda {
  content: "λ";
}

(<span>
  <span class="lambda">lambda</span>
</span>x (+ x 1))

Run codeHide result