【CSS】擬似要素beforeとafter（初心者向け）

はじめに

擬似要素とは、HTMLに記述することなく（擬似的な要素の追加）要素の特定の部分にスタイルを適用するものです。
名前のとおり、beforeを使うと特定の要素の前に、afterを使うと特定の要素の後にスタイルを適用します。

記述方法

HTML

<p class="hello">HELLO</p>

CSS

.hello::before {
     content: "★";
     color: red;
     font-size: 14px;
}

.hello::after {
     content: "●";
     color: red;
     font-size: 14px;
}

このように記述すると、画面には★HELLO●と表示されます。
contentプロパティがないと擬似要素は機能しないので、文字等を追加しないときでもcontent: "";と記述する必要があります。
また、imgタグなどの閉じタグがないものについては使用することができないので、気をつけましょう！！

おわりに

擬似要素を使えばアニメーションをつけたり、ふきだしをつけたり、いろいろなことができるので、試してみてください。