まず，擬似要素とはなにか…

擬似要素

CSS の 擬似要素Pseudo-elementsはセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば ::first-line 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。

擬似要素 (Pseudo-elements) - CSS: カスケーディングスタイルシート | MDN

DOM要素ではない便利な要素．

よく使うもの

• ::first-line 文章の最初の一行目．

• ::before ::after 要素の前と後につける．三角形作ったりに使う．

• ::spelling-error なんてのもあるらしい．

::spelling-error 含め実験的な要素が多い

注意点

擬似要素は1つのセレクターに1つだけ使用することができます。文内の単純セレクターの後に置く必要があります。

これ大事．

.classA, classB {
  &__::after {
  }
}

みたいなことができない．