html – 如何在不破坏复制粘贴的情况下替换CSS中的字符串？

假设我有以下代码：

(lambda (x) (+ x 1))

我想按如下方式显示它,而不更改实际复制粘贴的内容：

(λ (x) (+ x 1))

目的是实现Emacs的美化符号模式的效果. This question显示了如何隐藏一些文本并显示其他内容,但显示：不复制任何元素,至少在Firefox中是这样.

换句话说,如何在不破坏复制粘贴的情况下显示美化源代码清单？纯HTML CSS的加分点.

我能想到的最好的是以下内容：

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

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

这是正确的方法吗？

解决方法

这适用于Chrome和Firefox：

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

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

JSFiddle