css中伪类：after的⽤法（三种⽅式）
CSS中存在⼀些⽐较特殊的属性，称之为伪类，它们之中最常⽤的就是定义链接的伪:link，:visited，:hover，:active等。
除了它们，还有⼀些不被常使⽤的伪类，有:focus，:first-child，:lang等。
⽽且CSS⾥不光有伪类，还有伪元素，⽐如：:first-letter，:first-line，:before和:after。
本⽂中其它伪元素暂且不表，单说:after伪元素。
after顾名思义是在元素后⾯的意思，实质是在元素之后添加内容。
这个伪元素允许制作⼈员在元素内容的最后⾯插⼊⽣成内容，需要和content属性⼀起使⽤，设置在对象后发⽣的内容。默认地，这个伪元素是inline⾏内元素，不过可以使⽤属性 display 改变这⼀点。
所有主流浏览器都⽀持 :after 伪元素，但对于IE来说，只有IE8以上版本⽀持。
下⾯举个例⼦，在CSS代码中插⼊：
复制代码
代码如下:
cssclass属性<style type="text/css">
h1:after {content:url(logo.gif)}
</style> <h1>标题内容</h1>
在显⽰时，标题内容后会插⼊⼀张图⽚。这就是伪元素:after的作⽤。
:after伪类的content还可以跟其它的参数，
⼀：字符串例如：
复制代码
代码如下:
<style type="text/css">
.test:after{content:"测试代码"};
</style>
<div class="test">测试div：</div>运⾏结果显⽰为：测试div：测试代码
⼆：attr(x)，attr是属性的意思，顾名思义，就是读取该类节点的属性例如：
复制代码
代码如下:
<style type="text/css">
.test:after{content:attr(id)};
</style>
<div class="test" id="aaa">测试div的id为：</div>运⾏结果显⽰为：测试div的id为：aaa
三：固定参数
close-quote：插⼊ quotes 属性的后标记
no-close-quote ：并不插⼊ quotes 属性的后标记。但增加其嵌套级别
open-quote：插⼊ quotes 属性的前标记
no-open-quote：并不插⼊ quotes 属性的前标记。但减少其嵌套级别

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。