css中伪类:after的用法(三种方式)
发布时间：2013-02-01 10:43:22 作者：佚名 
我要评论
我要评论CSS中存在一些比较特殊的属性，称之为伪类,它们之中最常用的就是定义链接的伪:link，:visited，:hover，:active等本文详细介绍一下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代码中插入：
<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 属性的前标记。但减少其嵌套级别
除了它们，还有一些不被常使用的伪类，有:focus，:first-child，:lang等。
而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。
本文中其它伪元素暂且不表，单说:after伪元素。
after顾名思义是在元素后面的意思，实质是在元素之后添加内容。
这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。
所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。
下面举个例子，在CSS代码中插入：
复制代码
代码如下:<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 属性的前标记。但减少其嵌套级别
相关文章
- a标签的visied伪类的定义使用火狐还是ie都无法显示访问后的图片状态，据说从 Fx4 开始，能够应用的样式是受限的，感兴趣的朋友可以了解下2013-08-18
a标签的四个css伪类(link、visited、hover、active)样式理解
伪类是CSS 用于向某些选择器添加特殊的效果，chrome和firefox中的css监控并不会显示所有的样式，有些显示会有点不全，IE下还是有点问题的，不过大体不变2013-05-30- css伪类伪元素域高级选择器的介绍，需要的朋友可以参考一下2013-02-26
应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容
before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成,本文简单展示我在实际项目中，应用before/after伪类时候，如何CSS命名的，HT2013-01-08ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案
ie6环境下好多的标签除a标签都不支持伪类:hover，本人很是疑惑，于是搜集整理一番，晒出来和大家分享，希望对你们有帮助2012-12-21- CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。本文将详细介绍经常用于定义链接样式的四个伪类,需要的朋友可以参考下2012-12-10
- 上面是伪类的正确顺序，简称 lvha(love-ha)。你一直知道这个顺序但是为什么这样呢？原理是怎么样的？2011-07-22
- a标签的伪类只不过是又结合了不同的动作顺序，动作的触发顺序决定了伪类的顺序必须按lvha来写，接下来为大家详细介绍下，感兴趣的朋友不妨参考下2013-09-27
最新评论