本节书摘来自华章社区《响应式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中的事件触发器。