:after与::after的区别?

萌码编程
11-11 18:02

相信有不少小伙伴在第一次碰到:after与::after时都会有点小困惑,小编刚看到这种写法时冒出想法就是:我去,还能这么写?好别致,一个:与两个:有区别吗?和:hover又有什么不一样呢?

要弄懂上面的问题,咱们就要先弄清楚CSS伪元素是什么。

顾名思义,CSS伪元素并不是一个真正存在于HTML DOM中的元素,它的作用是用于向某些选择器设置特殊效果

伪元素语法格式

selector:pseudo-element {property:value;}

或与类配合使用:

selector.class:pseudo-element {property:value;}

常见CSS伪元素如下

::after(:after):用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素

::before(:befor):创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素

::first-letter (:first-letter):选中某 block-level element(块级元素)第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格)

::first-line (:first-line):在某 block-level element (块级元素)的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小

::selection:匹配元素中被用户选中或处于高亮状态的部分,并且只能应用于少数的CSS属性:color, background, cursor,和outline

知道这些后,我们再来看:after和::after的区别:

:after是CSS2的写法,::after是CSS3的写法;两个::是为了与一个:的伪类区别,这也侧面说明了:after与:hover之间的不同。

因此:after与::after作用上并没有什么区别,但是:after的兼容性要比::after的要好

伪元素的应用

::after和::before是我们在页面中经常会碰到的两个伪元素,经常被用来清除浮动或设置字体图标。

清除浮动

   <div class="clearfix">             
       <div>1</div>             
       <div>2</div>             
       <div>3</div>      
   </div>      
   <div class="test">测试内容</div>
  .clearfix{    
      background:blue;    
      width:200px;  
  }    
  .clearfix div{    
      float:left;  
  }     
  .test{    
      width: 200px;    
      background:red;     
  }

 

.clearfix的子元素设置浮动后脱离正常的文档流,.clearfix不能被撑开,.test就会占据.clearfix的位置。

  .clearfix::after{    
      content:"";    
      display: block;        
      clear:both;    
  }

 

通过给.clearfix的伪类after设置清除浮动,让.clearfix高度被撑开,既实现了清除浮动的效果,也无需在页面中添加多余的元素。

需要注意的是::after和::before默认都是行内元素,需要先转换为块级元素。

字体图标

  span::after{    
      content: "\e633";               
      font-family: "iconfont";          
  }