伪元素:before&::before的区别

(::)双冒号用于CSS3伪元素而(:)单冒号用于CSS3伪类，目的是为了区分伪元素和伪类。对于CSS2中已有的伪元素，单冒号和双冒号都可以。需要兼容IE浏览器的话，使用CSS2的单冒号会比较安全。

清除浮动

使用浮动布局的时候经常会遇到外层div高度塌陷的问题。

父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

通过伪元素after可以不用设定父级div高度，也不用添加额外的标签解决高度塌陷问题。

.clearfix:after {content:""; visibility:hidden; display:blcok; height:0; clear:both;}
.clearfix {*zoom:1;}

单标签实现按钮hover、active 明暗变化

    .btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      overflow: hidden;
      border-radius: 1em;
      font-size: 2em;
      line-height: 100px;
      text-align: center;
      color: #fff;
      background: #55E6C1;
      cursor: pointer;
    }
    .btn::before {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: -1; // 这里和层叠顺序(Stacking Order)有关，负z-index在background之上
      background: rgba(255,255,255,.2);
    }
    .btn:hover::before {
      content: "";
    }
    .btn::after {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: -1;
      background: rgba(0,0,0,.1);
    }
    .btn:active::after {
      content: "";
    }