::before,::after

CSSだけで、特定の要素の前か後ろに新しく要素を追加できる

リストの先頭や最後に必ず特定の記号を入れるといった用途が主

js抜きで結構トリッキーな使い方ができる

beforeとafterの2つしかないので他の装飾とコンフリクトしやすい

sassでmixin化してすぐに切り替えられるようにすると吉

対象となる要素のコンテンツの先頭および末尾に疑似的に要素を追加するものです。

code:css

div::before{

content: 'abc';

}

<div>def</div> は

<div><div::before />def</div>であり

<div>abcdef</div>

となります。そのため、コンテンツを持たない<input/> <img/> <hr/>などには使えません。