本文共 613 字，大约阅读时间需要 2 分钟。

前言

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

准备工作

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

实现方式

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

CSS标记方法有一点需要理解，插入的符号使用被插入内容所设定的内边距及外边距。该方法使用class:before和class:after伪类。在CSS中对before的设定为.class:before{content:"#";}。用你需要使用的内容替换#。至于after，采用.class:after{}替换.class:before{}。

工作原理

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

转载地址：https://lux-sun.blog.csdn.net/article/details/87031218 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！