&nbs p;
一、简单说说content内容生成
content 内容生成就是通过 content 属性生成内容， content 属性早在 CSS 2.1的时候就被引入了，可以使用 :before 以及 :after 伪元素生成内容。此特性目前已被大部分的浏览器支持： (Firefox 1.5+, Safari 3.5+, IE 8+, opera 9.2+, Ch rom e 0.2+)。另外，目前O PE ra 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" src="mm1. jpg " /> </div> 结果如下图：
正如 文章 开始 提到的，IE8+和其他所有现代浏览器都支持 :after + content ，所以，对于这些浏览器我们可以使用 :after + content 方法清除浮动造成的塌陷。使用如下：
.fix:after{dis play :block; content:"clear"; h ei ght:0; clear:both; overflow:hidden; visibil IT y: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; background-color: # beceeb; font- Size: 0; *font -s ize:200px; text-align: center ;} .pic_box img{ vert ical -align:middle; } .pic_box:after{ display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden; } 相应的HT ML 代码如下：
<div class="pic_box"> <img src="http://image.zhangxinxu .COM /image/study/s/s256/mm1.jpg" /> </div>
结果IE7下的效果如下：
@H_666_ 126 @
与清除浮动影响类似，IE6/7不支持 :after 伪类，我们可以用另外的方法让图片垂直居中，例如 font-size 方法，设一个比 较大 点的字体大小，IE6/7就可以实现图片垂直对齐了，至于其他浏览器，就用 :after 伪元素+ content 内容生成一个 vertical-align:middle 属性的元素就可以了。这是我对“大小不固定的图片、多行文字的水平垂直居中”一文中提到的最后的方法的又一次 提升 。
目前的测试结果是：所有浏览器都垂直居中， 不过 C hr ome浏览器的水平居中貌似左边偏移了点，这是因为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 潜力还有很多很多的，希望可以与诸位同行们一起 不断 思考，不断想出更实际更优秀的一些方法与解决 方案 ，一同进步一同成长。就这些，资质尚浅，文章如有表述不准确或是冒犯之处还请见谅，欢迎指正。希望本文内容能对您的学习有所帮助。
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-:after伪类+content内容生成经典应用举例 全部内容，希望文章能够帮你解决 html5教程-:after伪类+content内容生成经典应用举例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-:after伪类+content内容生成经典应用举例的详细内容...