疑似要素のbeforeとafterの使用方法について簡単にまとめてみた[CSS]

擬似要素とは

要素の一部に対してスタイルを適用できる指定方法です。
HTMLの要素を擬似的にCSSで設定するので、HTMLのコードを汚すことなく装飾を適用することができます。
なお、検索エンジンはCSSである疑似要素をコンテンツの中身として見ていないため、SEOを気にせず表現できます。
擬似要素には、::beforeと**::after**があります。
他にもありますが、今回はこの２つを紹介していきます！！！

「::before」「::after」

[書き方]

タグ名やクラス名、id名などの後に::beforeや::afterをつけます。
その後にプロパティと値を記述します。

.right::before{
  content: '『';
  color: blue;
}

.right::after{
  content: '』';
  color: blue;
}

[beforeとafterの違い]

::before
要素の直前に内容を追加。

::after
要素の直後に内容を追加。

[注意点]

content: ‘’プロパティの使用。
‘’の中には挿入したい文字や画像などを入れます。
contentは空でもOKです！ただし、content:''の指定を忘れると、疑似要素が全く表示されなくなるので注意して下さい！