擬似要素とは
要素の一部に対してスタイルを適用できる指定方法です。
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:''の指定を忘れると、疑似要素が全く表示されなくなるので注意して下さい！
↧