項(xiàng)目中，我們經(jīng)常需要在某些元素后面添加內(nèi)容，就像是圖中的小圓點(diǎn)，這時候可以用到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;
    }
  }

通常，設(shè)置contentposition: absolute;，可以靈活的操作內(nèi)容的擺放，也可以配合flex，快速的實(shí)現(xiàn)水平垂直居中，也可以與calc配合，left: calc(50% - 2.5px);，可以實(shí)現(xiàn)同樣的效果。

:after::after的區(qū)別

• 相同點(diǎn)

1. 都可以用來表示偽類對象，用來設(shè)置對象前的內(nèi)容
2. :befor和::after寫法是等效的

• 不同點(diǎn)

1. :after是css2的寫法，::after是css3的寫法
2. :after的兼容性要比::after好 ，不過在H5開發(fā)中建議使用::after比較好