:after伪类+content内容生成经典应用举例

这篇文章发布于 2010年09月28日,星期二,23:00,归类于 CSS相关。 阅读 162993 次, 今日 5 次 27 条评论

 

一、简单说说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" src="mm1.jpg" />
</div>

结果如下图:
浮动下的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:absolutedisplay:inline-blockfloat:leftoverflow:hidden等,但是,这些所有的方法都有局限性。我个人觉得:after伪类+zoom是目前最使用的清除浮动元素影响的方法。且不产生多余的标签,所以,我一直用它。下图为应用上面fix样式后的效果,截自Firefox3.6浏览器:

after伪类+content后清除浮动效果图

您可以狠狠地点击这里::after伪类+content清除浮动影响demo

三、:after伪类+content 让大小不固定图片垂直居中

关于让大小不固定的图片垂直居中,我之前写过篇研究性的文章“大小不固定的图片、多行文字的水平垂直居中”,里面详细展示了多种图片水平垂直居中方法,各个方法的好坏你自己评判。

这里介绍的:after伪类+content实现的图片垂直居中方法是我目前为止个人觉得最好,最使用的方法。OK,测试CSS代码如下(绿色部分为功能相关CSS代码):

.pic_box{width:300px; height:300px; background-color:#beceeb; 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 loading="lazy" src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>

结果IE7下的效果如下:
IE7下after伪类和content实现图片垂直居中效果图

与清除浮动影响类似,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潜力还有很多很多的,希望可以与诸位同行们一起不断思考,不断想出更实际更优秀的一些方法与解决方案,一同进步一同成长。就这些,资质尚浅,文章如有表述不准确或是冒犯之处还请见谅,欢迎指正。希望本文内容能对您的学习有所帮助。

(本篇完)

分享到:


发表评论(目前27 条评论)

  1. T ll说道:

    给image的父元素 display:table-cell;text-align:center;vertical-align:center 就能实现垂直居中了

  2. heyheymymy说道:

    让大小不固定图片居中那个为什么我的没有效果,一样的代码

  3. 胡乱唱歌说道:

    通过伪类清浮动会造成高度变大的bug是什么原因呢?有解决方案吗?

  4. 前端汪说道:

    博主冒昧的问一下,::after添加的内容属于DOM层吗?如果是的话js不能操作,鼠标也不能选中,如果不是哪它是属于一个什么层级呢?

  5. 说道:

    我尝试着在手机上用纯css 和 svg字体图标实现gif 动画,
    原理 keyframes + :before + content:’\e400′ 来实现,不过小米手机就不支持

    旭神说 content 和 attr 会大放异彩, 我就用attr 试了一下,尼玛 写的 data-a1=”\e400″
    结果 就显示的 \e400 了,顿时感觉 low爆了。。。。。。

    谁来帮我补脑一下,这个效果该怎么搞?(不想用图片来实现)

  6. love-zhanglaoshi说道:

    hi,张老师,我发现不需要借助after就能实现“三”里的效果,给.pic_box加上:line-height: 300px; display: list-item; 这个display list-item 是个好东西。注:我只是个搞后端的,前端水平有限,这个兼容性估计不行~~~,偶尔发现的哈~~~~

    • tinyant说道:

      你这个是line-height引起的,跟list-item没关系,但是加了line-height会有什么负作用就要看具体场景了

  7. kevin梁说道:

    img上好像不能用伪类, 这是为什么?

  8. JackZhouMine说道:

    博主你好,quotes的用法可否写写啊? 我在你的博客里没有搜索到。

  9. sa说道:

    棒棒哒! 感谢博主的分享,学到了很多!

  10. 小尚说道:

    为什么我看到有的地方兼容ie6/7是这样写的呢?
    .clearfix:after{
    visibility:hidden;
    display:block;
    font-size:0;
    content:””;
    clear:both;
    height:0;
    }
    * html .clearfix{zoom:1} /* IE6 */
    *:first-child+html .clearfix{zoom:1} /* IE7 */

  11. 张含韵她哥说道:

    哥,我发现你狠喜欢用张含韵的照片来做例子啊,你狠喜欢她吧,哈哈哈哈

  12. sarlife说道:

    在content里面加的文字,在浏览器里面不能复制,不太适用。

  13. feixiaochuan说道:

    IE6.0没有居中效果

  14. 小朋友说道:

    最后那个图片垂直居中,IE6根本不行

  15. 哥你太牛B了说道:

    我想加你的QQ好好听听你讲三天三夜

  16. Felix说道:

    为什么在清除浮动和DIV包裹问题上要用这么复杂的Hack来解释?直接在父级上写一个overflow:hidden;就能解决的问题,为什么要这么纠结的说那么多?

  17. tunpishuang说道:

    .fix:after{
    display:block;content:””;clear:both;
    }

    我试了一下,content不加内容效果一样,不知道作者的给conten加内容的用意是什么,为了演示效果吗?还是有其他作用。望指教。

  18. 初学CSS,最近时常搜索至博主的博客,在此谢过了

  19. curlsli说道:

    不知道怎么就看到了这篇文章,也没遇到此类问题,反正读完之后觉得很不错,真是个爱思考的人啊。以后长期关注吧,越来越好!

  20. 番茄说道:

    最后那个图片居中的方法之前也做过,我记得只是ie6下有问题,所以有两个方案,一个是加一个空元素,设置行高等于父元素的高度(总之为了是撑开行高),另外一个是不加空元素,用font-size来调整,不过麻烦之处在于手动一点一点调才能取得合适的值。

    而对于ie6之外的浏览器,实际上是不需要这么做的,直接控制line-height即可。所以你这里用:after插入伪元素等于做了无用功。另外对于ie7。我记得是不需要调整font-size的,所以那个hack可以改成_font-size。
    另外这个方法并不限于图片居中,任何元素都可以这么来用,假设图片换成div
    最后代码如下:
    .pic_box{width:300px; height:300px;line-height:300px;background-color:#beceeb; _font-size:200px; text-align:center;}
    .pic_box div{vertical-align:middle;display:inline-block;*display:inline;*zoom:1;font-size:12px;line-height:1;}