css伪元素::before与::after

伪元素前面一定是双冒号:: ,单冒号的是选择器。

1、用来给元素前后添加新的元素。比如标题前面会有一个小方块，就可以通过‘::before ’来添加。

.title::before{
display: block;
content:'';
height:30px;
width:4px;
background:#eee;
}

 最重要的两个属性，一定要家display和content.

 

2、用来添加图片

 <i class="icon-plane"></i>

 

.icon-plane {
      display: inline-block;
      position: relative;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(to bottom right, #2ca0f7, #1e95ed);
      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url("./images/icon_plane.png") no-repeat;
      }
    }

 

 生成效果：

注意的是：伪元素里一定要添加content: ""，否则是没有图片的。

 

 

3、清除浮动