:after、:beforeとはcss擬似要素の使い方

ya-ya-ya-

擬似要素って何？どうやって使うの？after？before？そんなのしらねーーよ！そんなことありますよねコーディング始めたばかりの頃は

なんでざっくり使い方説明しますね

まず擬似要素とは何か。

呼び方は気にしないことですね笑 実際にHTMLに書いてないけどなんかのタイミングで表示するようにできたりとかとか そんなないんですよ

例えばafterだけで箱を作りたい場合はこんな感じ divのあとに四角い小さい箱置いてみたいと思います。 画像無しなのでイメージしてください笑

HTML

`<div class="example"> 　あいうえおーー </div>

CSS

.example {
  padding-left: 30px;
  position: relative;
}

.example:after {
  background: $bg-color;
  content: '';
  display: block;
  height: 22px;
  right: 10px;
  position: absolute;
  top: 4px;
  width: 22px;
  }

こんな感じですね笑

まずはafterだと擬似要素なんでインライン要素でもブロック要素でも何でもない謎のやつなんですよ確か なので display:block;でお前はブロック要素なんだぞって教えてあげてます。 ブロック要素にすることでheightとwidthを当てることができますね高さと幅が決められるということは背景に色とかもいけちゃいますね！ 実際に細かい位置にずらして使うので浮かせ移動しないといけませんねえそのためpositionで動かせるようにしてます！ positionつけてやることで　right、left、top、bottomが使えるようになりますね笑それで細かく設定するのです☆

実はこれだけではダメでcontentというプロパティが必須になります基本的には。 空っぽのやつにいろいろやってあげてもダメやん中身（コンテンツ）何にするねん！って感じなんで、実際お前は空っぽの箱になってくれればいいんや！ってことで ""をプレゼントします。 そうすると喜ぶ、、、動くんですよー

文字横のアイコンとかはよくこのafterとかbefore使いますよー 前とか上に表示するならbeforeで下とか右に表示するならafterみたいな使い分けですよんたぶん

以上