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

原创 2016年10月23日 15:15:23

基本概念

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/

版权声明:本文为博主原创文章,欢迎转载和发表评论,转载请注明出处。 https://blog.csdn.net/u013778905/article/details/52901880

关于:after和:before伪类的用法,以及让浮动占据高度问题。

第一次写技术博客。写得不好的话,大神们请见谅啊。 前段时间有个搞前端搞得还不错的朋友去面试,被问到了一个问题。就是怎么用一个标签画出一个铅笔状的图形。就像下图这样。 当时我还有点懵,感觉一...
  • kelvinbean
  • kelvinbean
  • 2015-07-22 15:21:16
  • 2936

论CSS ::before 和 ::after

前言 单冒号写法兼容性比较强[可支持解析的浏览器较多],双冒号的写法只支持较新的主流浏览器; W3C的解释用一句话概括:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪...
  • bomess
  • bomess
  • 2016-04-21 14:43:33
  • 6348

LinkedBlockingQueue的put,add,offer和poll,remove,take的区别

从队列中取出并添加元素的方法有:put,add,poll put: 若向队尾添加元素的时候发现队列已经满了会发生阻塞一直等待空间,以加入元素。 add:若超出了度列的长度会直接抛出异常。 t...
  • taobaoge123
  • taobaoge123
  • 2017-05-07 13:24:08
  • 3103

::before和::after伪元素的用法

一、介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-...
  • liaozhongping
  • liaozhongping
  • 2015-09-28 10:44:37
  • 4606

Web前端面试指导(十二):::before 和:before有什么区别?

题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚。回答的技巧就是从相同点和...
  • lxcao
  • lxcao
  • 2016-09-23 17:40:08
  • 2988

CSS伪元素选择器:before与:after

在css标签中有这样子的标签div:before、div:after,对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处?   :befor、:after是CS...
  • zerlinda_c
  • zerlinda_c
  • 2015-12-07 16:54:58
  • 5873

触发器里面before和after的区别

关键字before和after用于标识触发时间,顾名思义,before代表触发器里面的命令在DML修改数据之前执行,after代表触发器里面的命令在DML修改数据之后执行。    读者可以结合应用场景...
  • zhangzl1012
  • zhangzl1012
  • 2017-10-09 22:29:59
  • 866

CSS伪类before,after制作左右横线中间文字效果

html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> .container{...
  • baidu_33163851
  • baidu_33163851
  • 2016-05-03 14:48:14
  • 19868

使用CSS:Before伪元素设置块级分割线

今天学习了css中:before选择器的用法。原来该选择器的作用是往元素的内容之前插入新内容,同时可以给内容设置样式,after也是同样的用法,而这两个伪元素的功用还仅于此,在这里,我只是介绍利用该伪...
  • BeiLinYu
  • BeiLinYu
  • 2017-01-18 14:17:25
  • 3537

用:after伪元素标签写分割线

最近在手机商城和微信页面很多都用到了分割线,下面总结用到的分割线。 第一种: 效果: html:     产品热卖 ________________________________ styl...
  • u014100996
  • u014100996
  • 2015-11-02 23:48:16
  • 4103
收藏助手
不良信息举报
您举报文章::after/::after和:before/::before的区别
举报原因:
原因补充:

(最多只允许输入30个字)