CSS基礎編--:before&&::afterの使い方、擬似クラスと擬似要素の違い

一::before&::afterの使い方

:before

擬似要素の名前と同様に、beforeは指定した要素の内容の前に新しい内容を挿入するために使用されます.例:

.before:before{content:'you before'; color:red;}

 me

ここでは、偽要素:beforeに属性contentを追加し、you beforeに値を付けます.効果を見てみましょう:// me you beforeここで偽要素:beforeで追加された新しいコンテンツ領域のデフォルトのdisplay属性値がinlineであることを発見するのは難しくありません.では、新しいコンテンツ領域の属性を変更することができますか.答えは肯定的です.他の要素を変更するようにスタイルを変更することができます.displayプロパティ値をblockに変更します.

.before:before{content:'you before'; display:block; color:red;}
 me

// :before の効果を見てみましょう

contentプロパティ

擬似要素:beforeおよび:afterの場合、属性contentは設定する必要があります.属性の値は文字列であってもよいし、画像を指すURLのような他の形式であってもよいことを知っています.

 content: url( "img/icon.png" )

擬似クラスと組み合わせて擬似要素を使用:beforeは擬似クラスと組み合わせて使用することもできます.ここでは、beforeとよく組み合わせて使用される擬似クラス:hoverを例に挙げます.

.before:hover:before{content:'you before'; color:red;}
 me

結合値関数attr()の使用には、次のような比較的一般的な使用法があります.すなわち、結合値関数attr()を一緒に使用します.

a::before{content: attr(title)}

この効果は次のようになります.

    けの       コミュニティ

:after

擬似要素:afterは擬似要素:beforeタイプと同じですが、指定した属性content値は指定した要素の内容の後ろに表示され、省を説明します.

二:擬似クラスと擬似要素の違い

擬似クラス

擬似要素の種類

：
例:

a:link
 {color:#111}
a:hover
 {color:#222}
div:first-child
 {color:#333}
div:nth-child(3)
 {color:#444}

これらの条件はDOMに基づいているわけではありませんが、結果は各要素がリンク全体、段落、divなどの完全な要素に作用します. ：
例:

p::first-line
 {color:#555}
p::first-letter
 {color:#666}
a::before
 {content : "hello
 world";}

擬似要素は要素の一部に作用します.段落の最初の行または最初のアルファベットです.
まとめ:
偽要素は実は1つの要素を偽造したことに相当して、例えばbefore、first-letterの達成した効果は1つの要素を偽造して、それからその相応の効果を追加しました;
偽クラスには偽造要素はありません.例えばfirst-childはサブ要素にスタイルを追加するだけです. ， ， css3 ， ， 。 ， ， ， ， 。
本文があなたの学習に役立つと思ったら、多くの支持と励ましをしてください.