CSS3中的伪元素选择器与scss

以vue组件未例子来演示代码：

<template>
  <div>
    Practice
    <ul>
      <li>面包屑一级导航</li>
      <li>二级导航</li>
      <li>内容</li>
    </ul>
    哈哈哈
  </div>
</template>

<script>
export default {
  name: "Practice"
};
</script>

<style scoped lang="scss">
ul {
  margin: 10px;
  background: #ccc;
  padding: 10px;
  border: 1px solid #999;
  list-style: none;
/*设置当前元素的伪元素*/
  &::after {
    clear: both;
    content: "";
    display: block;
  }
}
li {
  float: left;
  margin-left: 10px;
  &::after {
    content: "/";
    margin-left: 10px;
  }
}
li:last-child::after {
  content: none;
}
</style>

页面出来的效果如图所示：

有人可能会对上面的scss中的&::after有疑问，下面来着重解释一下：

/*scss文件中*/
li {
  float: left;
  margin-left: 10px;
  &::after {
    content: "/";
    margin-left: 10px;
  }
}

被webpack打包之后，编译成css如下：

li { /*  some style 1 */}

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

那个&符号，我理解就是指代的当前元素。&::after表示的就是设置当前元素的伪元素。