:after伪类 content内容生成经典应用举例——张鑫旭
一、简单说说content内容生成
content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持: (Firefox 1.5 , Safari 3.5 , IE 8 , Opera 9.2 , Chrome 0.2 )。另外,目前Opera 9.5 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素。
例如下面这个简单的例子:
h2:before {
content: "我是额外文字!";
}
此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”。
您可以狠狠地点击这里:content最基本使用Demo
content内容生成有非常多的特别的技术和应用,具体可以参见我之前写的“CSS content内容生成技术以及应用”一文,但是,那里面介绍的些技术,虽然可以给我们带来看到美女时类似的感觉,但是,目前而言,都是些没有什么实用价值的技术。
但是,实际上,:after伪类 content内容生成却是有着非常有用实用的作用的,本文就将展示这些实用的应用。
二、:after伪类 content 清除浮动的影响
这个技巧我想很多同行都用过,所以,这里仅简单介绍下。
有点经验的同行应该知道,一般不含包裹属性的div内部有浮动元素的话,那么这个浮动元素会让此div的高度塌陷。如下例子:
.box{padding:10px; background:gray;}
.l{float:left;}
<div class="box">
<img class="l" data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
结果如下图:
正如文章开始提到的,IE8 和其他所有现代浏览器都支持:after content,所以,对于这些浏览器我们可以使用:after content方法清除浮动造成的塌陷。使用如下:
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
这样就可以让IE8 和其他浏览器清除浮动破坏带来的塌陷问题了。至于暂不支持:after伪类的IE6/IE7,我们可以使用IE私有的zoom缩放属性让div远离浮动的破坏。故,双剑合璧下就是:
.fix{*zoom:1;}
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
这样子,就可以实现目前所有浏览器的清除浮动影响的方法了。
虽然,清除浮动影响方法很多,添加包裹属性的元素,例如:position:absolute; display:inline-block; float:left; overflow:hidden等,但是,这些所有的方法都有局限性。我个人觉得:after伪类 zoom是目前最使用的清除浮动元素影响的方法。且不产生多余的标签,所以,我一直用它。下图为应用上面fix样式后的效果,截自Firefox3.6浏览器:
您可以狠狠地点击这里::after伪类 content清除浮动影响demo
三、:after伪类 content 让大小不固定图片垂直居中
关于让大小不固定的图片垂直居中,我之前写过篇研究性的文章“大小不固定的图片、多行文字的水平垂直居中”,里面详细展示了多种图片水平垂直居中方法,各个方法的好坏你自己评判。
这里介绍的:after伪类 content实现的图片垂直居中方法是我目前为止个人觉得最好,最使用的方法。ok,测试CSS代码如下(绿色部分为功能相关CSS代码):
.pic_box{width:300px; height:300px; font-size:0; *font-size:200px; text-align:center;}
.pic_box img{vertical-align:middle;}
.pic_box:after{display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}
相应的HTML代码如下:
<div class="pic_box">
<img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
结果IE7下的效果如下:
与清除浮动影响类似,IE6/7不支持:after伪类,我们可以用另外的方法让图片垂直居中,例如font-size方法,设一个比较大点的字体大小,IE6/7就可以实现图片垂直对齐了,至于其他浏览器,就用:after伪类 content内容生成一个vertical-align:middle属性的元素就可以了。这是我对“大小不固定的图片、多行文字的水平垂直居中”一文中提到的最后的方法的又一次提升。
目前的测试结果是:所有浏览器都垂直居中,不过Chrome浏览器的水平居中貌似左边偏移了点,这是因为Chrome浏览器font-size:0,不能消除空格产生的水平距离的原因。这或许是唯一点瑕疵吧。
您可以狠狠地点击这里::after伪类 content图片垂直居中demo
四、结语
方法都是人想出来的。
例如让大小不固定图片垂直居中,我一开始是使用淘宝前端想出的的diaplay:table-cell font-size方法,但是发现不支持浮动等缺点,开始想新方法;
后来发现两个vertical-align:middle属性的图片靠在一起是会垂直对齐的,于是自己就将其中一张图片宽度设成1像素,高度100%,且本身为透明图片,于是实现了利用1像素宽度的辅助图片实现图片垂直居中对齐;
后来发现不一定是图片,只要是inline-block属性或是类似inline-block属性的元素就可以了,于是后来就使用span或是i标签等代替1像素宽的透明图片,于是节约了一次图片链接请求;
再后来,又发现宽度不一定是1像素,就是设成0,也是可以的,于是,就不用担心辅助元素错行的问题了;
再到现在,利用content内容生成技术,0宽度的实体标签用:after伪类 content生成,这样,就避免了在页面上写入辅助效果的空标签,同时借助了淘宝前端多年之前发现的font-size居中方法。
虽说不上什么优秀的方法,也可能早有高人知道了并使用了此方法,但是,毕竟见证了自己的进步,还是满心欣慰的。
:after伪类 content潜力还有很多很多的,希望可以与诸位同行们一起不断思考,不断想出更实际更优秀的一些方法与解决方案,一同进步一同成长。就这些,资质尚浅,文章如有表述不准确或是冒犯之处还请见谅,欢迎指正。希望本文内容能对您的学习有所帮助。
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1136
更多专业前端知识,请上 【猿2048】www.mk2048.com
:after伪类 content内容生成经典应用举例——张鑫旭相关推荐
- :after伪类+content内容清除浮动
1.简单说说content内容生成 content内容生成就是通过content属性生成内容 例如下面这个简单的例子: 此段样式的作用是在每个h2标签的前面添加文字"我是额外文字" ...
- :after伪类+content经典应用举例
:after伪类+content 清除浮动的影响 .box{padding:10px; background:gray;} .l{float:left;}<div class="box ...
- html中after伪类原理,css :after伪类+content使用说明和方法
首先,这段代码中的content: ".";有什么用,解决了什么问题,为什么要用他? content属性用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创 ...
- js table 生成序号_CSS Counter 以及 CSS content 内容生成技术的实用价值
写这篇文章是因为,昨天在组里临时做了个分享,觉得还蛮有意思的,所以想记录下来.分享内容是讲 CSS Counter 的,从怎么使用它,到它的实际使用价值,以及一些延伸的用法.那我们直接进入正题. 怎么 ...
- content 内容生成技术2
计数器效果可是说是content的重中之重, 此功能非常强大.实用, 且不具有可替代性, 甚至可以实现连js都不好实现的效果. 这个地方放慢节奏, 细细品味. 先来个例子体验一下: .reset {c ...
- css+伪类+加载动画,CSS3 optional伪类兼容实现加载中loading效果 » 张鑫旭-鑫空间-鑫生活...
CSS代码: /* 无限旋转 哔哔哔->奥特曼 */ .spin { -webkit-transform: rotate(360deg); -webkit-animation: spin 1s ...
- html固定内容的文本框,文本域文字内容指定选中 张鑫旭-鑫空间-鑫生活
展示 代码 CSS代码: textarea{font-size:1em; width:500px; height:100px;} HTML代码: 插入话题 JS代码: var $ = function ...
- css3之before、after伪类以及简单实现购物车图标
"伪类"可以说是css中的特效元素,按本人亲身经历来看,在不是很系统的自学过程中常常会忽略伪类.这里带大家快速了解:before和:after伪类和简单上手购物车图标的demo. ...
- CSS常用伪类选择器详解
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素. 应用场景: 鼠标经过元素时的样式变化,Tips提示,下拉列表和过渡动画等 细节优 ...
最新文章
- 科技公司最爱的 50 款开源工具,你都用过吗?
- linux 同步 多终端,Linux系统如何实现不同终端间的同步
- WEB前端学习四 js什么是原始类型
- 昆士兰科技大学计算机专业,昆士兰科技大学QUT计算机科学Computer Science专业排名第101-125位(2021年THE世界大学商科排名)...
- [转]Linux的tail 与head 命令
- 查找数组键名是否存在
- 【文件游标的设置、获取与恢复;其它文件库函数的使用】(学习笔记20--文件下)
- 钩子怎么画_画男生校服有什么技巧?该注意什么?
- CSS3属性——(二)
- windows配置pip加速器
- CISSP 重点知识点总结2
- url重写(urlrewrite.xml)
- fast无线路由器设置服务器,Fast迅捷无线路由器怎么设置 Fast迅捷无线路由器设置方法【详细步骤】...
- 程序猿之国庆有空吗?
- jzoj 4399: 加减乘除模五则运算
- arcgis中mxd批量导图(tif,png,jpg,pdf)
- 说说找工作这些事儿(未完)
- 算法工程师的三个境界
- Micropython——HC-SR04超声波测距模块
- JavaWeb-狂神系列