伪元素before/after，hover等注意事项

伪元素before/after

::before 在父类元素的最前添加一个伪元素

::after 在父类元素的最前添加一个伪元素

1. 必须设置content属性才能生效
2. 是行内元素
   1. 加宽高时最好设置为块级元素

      display: block;

用两个::的原因

1. 兼容性
2. 与伪类选择器区分开来

所有孩子中第四个孩子元素且为i的，并不是i的第四个孩子元素

li i:nth-child(4)::after {

content: '\e665';

}

hover

hover左边是选中的盒子，右边是作用效果的子盒子。

.box .item:hover .info {
            transform: translateY(-50px);
        }


 .box:hover::before {

​            transform: translate(-100%);

​        }