【SCSS】SCSSで疑似要素を実装しよう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

１分で理解できるHTML/CSS講座シリーズです。

今回はSCSSで擬似要素を実装する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

1分でSCSSで擬似要素を実装できる

１分で理解できるHTML/CSS講座シリーズはじめっ！

CSSとSCSSで疑似要素を実装しよう！
1. CSSで疑似要素を実装
2. SCSSで疑似要素を実装
まとめ

CSSとSCSSで疑似要素を実装しよう！

CSSで疑似要素を実装

.クラス名::after {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%; 
  background: rgba(0, 0, 0, 0.5);
  content: "";
}

今回はこれをSCSSに書き換えよう！

SCSSで疑似要素を実装

.クラス名{
    &::after {
        position: absolute;
        top: 0; 
        left: 0; 
        width: 100%;
        height: 100%; 
        background: rgba(0, 0, 0, 0.5);
        content: "";
    }
}

SCSSで疑似要素を実装するには＆をつけよう！
＆をつけ忘れるとコンパイルは通るけど処理が実装されないよ！

まとめ

SCSSで疑似要素を使うには＆をつける

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram