::before,::after
CSSだけで、特定の要素の前か後ろに新しく要素を追加できる
リストの先頭や最後に必ず特定の記号を入れるといった用途が主
js抜きで結構トリッキーな使い方ができる
beforeとafterの2つしかないので他の装飾とコンフリクトしやすい
対象となる要素のコンテンツの先頭および末尾に疑似的に要素を追加するものです。
css div::before{
content: 'abc';
}
<div>def</div> は
<div><div::before />def</div> であり
<div>abcdef</div>
となります。そのため、コンテンツを持たない<input/> <img/> <hr/>などには使えません。