:after/::after和:before/::before的区别

版权声明:本文为博主原创文章,未经同意,不得转载。 https://blog.csdn.net/u013778905/article/details/52901880

基本概念

1.他们都是CSS伪元素,与:hover/:active等伪类不一样。
2.:before/:after伪元素是在CSS2中提出来的,所以兼容性可能到IE8了。
3.::before/::after是CSS3中的写法,为了将伪类和伪元素区分开。但是平时为了兼容性,还是会用一个冒号的写法。

基本用法

p:after{} 
img:before{}

这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CSS 渲染层加入。比较有用的是以下几个值:

  • [String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。示例: a:after { content: "↗"; }

  • attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:a:after { content:"(" attr(href) ")"; }

  • url() / uri() – 用于引用媒体文件。示例: h1::before { content: url(logo.png); }

  • counter() – 调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:
    h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

进阶用法
我们最常用的就是用来清除浮动和制作三角之类的特殊元素了。
现在大家常用的清除浮动的方法:

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}

制作三角的方法:



    .c-main:before{
    content: '';
    border-top: 9px solid transparent;/*方框上部分背景颜色为透明*/
    border-bottom: 9px solid transparent;/*方框下部分背景为透明*/
    border-right: 9px solid #eee;/*箭头背景颜色*/
    position: absolute;/*绝对定位1*/
    top: 25px;/*距离顶部位置偏移量2*/
    left: -9px;/*距离左边位置偏移量3*/ /*123都是控制显示位置的*/
    }
    .c-main:after{
    content: '';
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #fbfdfb;/*箭头背景颜色,覆盖前面的#eee颜色,使其颜色与整体颜色一致*/
    position: absolute;
    top: 27px;
    left: -7px;
    }

定位都是其次的,主要是看border设置。一边有颜色,其他三边透明就可以实现。

参考文章:
http://blog.dimpurr.com/css-before-after/

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页