css利用伪元素::after控制content显示

项目中，我们经常需要在某些元素后面添加内容，就像是图中的小圆点，这时候可以用到after伪元素

 /deep/ .mark {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    &::after {
      content: '';
      position: absolute;
      display: flex;
      justify-content: center;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      bottom: 3px;
      background-color: #FF7F50;
    }
  }

通常，设置contentposition: absolute;，可以灵活的操作内容的摆放，也可以配合flex，快速的实现水平垂直居中，也可以与calc配合，left: calc(50% - 2.5px);，可以实现同样的效果。

:after::after的区别

• 相同点

1. 都可以用来表示伪类对象，用来设置对象前的内容
2. :befor和::after写法是等效的

• 不同点

1. :after是css2的写法，::after是css3的写法
2. :after的兼容性要比::after好 ，不过在H5开发中建议使用::after比较好