SCSS 中的 &::before 和 &::after

在看一个文件的时候，发现有&::before 和 &::after, 没有理解怎么用的，因为以前在项目的css文件中，从来没有使用过，也没有见过

网上查询了一下，才发现&::before 和  &::after都不是CSS中的内容，而是Sass和SCSS中的属性, 通常可以写成这样

Scss文件
test.scss

li{

   /*  some style 1   */

  &::after{

     /* some style 2  */  

    }

}

它经过使用gulp进行编译后，就会生成test.css文件，如下

test.css

li { /*  some style 1 */}

li::after {/* some style 2 */}