疑似要素のbeforeとafterの使用方法について簡単にまとめてみた[CSS]
擬似要素とは
要素の一部に対してスタイルを適用できる指定方法です。
HTMLの要素を擬似的にCSSで設定するので、HTMLのコードを汚すことなく装飾を適用することができます。
なお、検索エンジンはCSSである疑似要素をコンテンツの中身として見ていないため、SEOを気にせず表現できます。
擬似要素には、::beforeと::afterがあります。
他にもありますが、今回はこの2つを紹介していきます!!!
「::before」「::after」
[書き方]
タグ名やクラス名、id名などの後に::beforeや::afterをつけます。
その後にプロパティと値を記述します。
.right::before{
content: '『';
color: blue;
}
.right::after{
content: '』';
color: blue;
}
[beforeとafterの違い]
::before
要素の直前に内容を追加。
::after
要素の直後に内容を追加。
[注意点]
content: ‘’プロパティの使用。
‘’の中には挿入したい文字や画像などを入れます。
contentは空でもOKです!ただし、content:''の指定を忘れると、疑似要素が全く表示されなくなるので注意して下さい!
Author And Source
この問題について(疑似要素のbeforeとafterの使用方法について簡単にまとめてみた[CSS]), 我々は、より多くの情報をここで見つけました https://qiita.com/emily-08/items/9abf6c97784465c4fce3著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .