《响应式Web设计：HTML5和CSS3实践指南》——2.10节基于before及after伪元素添加字符

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第2章，第2.10节基于before及after伪元素添加字符，作者（美）　Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

2.10　基于before及after伪元素添加字符
就像在电视剧《迷离时空》（The Twilight Zone）中遗失的一集一样，CSS提供的新属性赋予了使用者在内容中添加伪标记的能力。可能听起来会有点奇怪，但这种方法却有着众多的应用场景。例如一个场景是，需要在显示的时候把文本内容放进引号之中，但是同时不想在内容或者主题文件中添加这些引号，显然这样是比较明智的做法。或者你也想通过标签和@标记尝试时下流行的Twitter，例如想要在内容之前添加#或是@符号。采用CSS标记方法即可完成功能，呈现出如下代码行中的内容：

2.10.1　准备工作
该方法不需要任何服务器端的逻辑或者特殊技巧。你只需在本地打开页面就能看到实际的应用效果。

2.10.2　实现方式
实现该方法只需要CSS即可，因此需要做的只是创建HTML页面，在页面中对于目标内容设定class或id属性：

2.10.3　工作原理
CSS中的before及after伪元素分别在元素内容的前后添加设定内容。需要注意的是，添加的内容不是真正的内容或者元素，不能应用标记方法或是JavaScript中的事件触发器。