みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
1分で理解できるHTML/CSS講座シリーズです。
今回はSCSSで擬似要素を実装する方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 1分でSCSSで擬似要素を実装できる
1分で理解できるHTML/CSS講座シリーズはじめっ!
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フォローしてもらえると嬉しいです🦈