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

Question

假设我有以下代码:

(lambda (x) (+ x 1))

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

(λ (x) (+ x 1))

目的是实现Emacs的prettify-symbols-mode效果。 This question展示了如何隐藏一些文本并显示其他内容，但是 display:none 元素不会被复制，至少在 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))

这是正确的做法吗？

Answer 1

这适用于 Chrome 和 Firefox:

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

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

JSFiddle