如何使用CSS :before 选择器

1、代码应用实例。在这里，我们进行了个内容样式的变化。

p:before{ content:"台词：";}

2、在浏览器的支持性方面，我们只需要考虑 IE8 会有一个<!DOCTYPE>。

3、代码复杂应用。从这个例子可以看出来，我们不仅仅插入了内容，更在这个内容前进行了一个样式的变化。

p:before{ content:"台词：-";background-color:yellow;color:red;font-weight:bold;}

4、完整的style 流程。只要在style 语句里面进行设定，我们就可以制造更多的样式变化。

<style>

p:before

{

content:"台词：";

font-size:200%;

background-color:yellow;

color:red;

font-weight:bold;

}

</style>

5、CSS :after 选择器，这个代码与上面的一个代码正好相反，它的使用让选择的元素之后可以插入一个内容。

6、:after 的完整流程。

<style>

p:after

{

content:"- 词";

font-weight:bold;

color:orange;

hover:red;

background-color:red;

}

</style>