javascript - 使用 CSS 将表情符号文本替换为图像

Question

我想知道是否有一种方法可以使用纯 CSS 将文本替换为 span 对象？

例如：

This is a :) sample text

上面示例中的 :) 将替换为

This is a <span class="emot-smile"></span> sample text

或类似的隐藏文本本身并添加跨度的东西。

:before 和 :after 选择器是我可以使用的吗？

Answer 1

不，这在纯 CSS 中是不可能的。

CSS用于样式。对于页面上内容的动态更改，您必须使用 Javascript。对于这个微笑：

var str = "This is a :) sample text";
str = str.replace(":)", "<span class='emot-smile'>replaced span</span>");

document.write( str );​

Answer 2

不，CSS 不能包装你的内容和修改 DOM 树。