:after の使用に関する深い理解

パート1: 基礎

1. :active や :hover などの疑似クラスとは異なり、これらはすべて疑似要素です。

2. :before/:after 疑似要素は CSS2 で提案されました。 ::before/::after は CSS3 での記述方法です。疑似クラスを区別するために、疑似要素を表す 2 つのコロンを使用することが再度提案されています。

3. これらは、セマンティクスを実現できるため、CSS のセレクターの後に装飾的なコンテンツを追加するために使用されます。HTML を使用して、実際のコンテンツや補助的なサンプルテキストのないノードを追加した場合、それらは意味を持ちません。

4. これらには独自の属性コンテンツがあり、追加されたコンテンツはデフォルトでインライン要素になります。

5. 作成された疑似要素は、デフォルトでは、それが添付されている要素の上にあります。下に配置するには、z-index:-1; を使用します。

6. これらは実際のノードではなく、仮想ノードです。のように：

 div::after{
            コンテンツ： " ";
            境界線:細い実線の赤;
        }

ブラウザで確認できます:

::after は実際のノードではありませんが、一部の Web サイトで使用されているのをよく見かけます。

6. input、img、iframe などの要素には他の要素を含めることができないため、疑似要素を通じてコンテンツを挿入することはできません。

パート II: アプリケーション

1. セパレーターとして使用します。

 <!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>疑似要素</title>
    <スタイル>
        {
            色:青;
            テキスト装飾: なし;
        }
        .log:後{
            コンテンツ:"|";
            色：赤;
        }
    </スタイル>
</head>
<本文>
    <a href="" class="log">ログイン</a><a href="">登録</a>
</本文>
</html>

効果は以下のとおりです。

2. 三角形を作る

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>疑似要素</title>
    <スタイル>
        {
            色:青;
            テキスト装飾: なし;
        }
        .log:前{
            コンテンツ：" ";
            表示: インラインブロック;
            幅: 0;
            高さ: 0;
            border:10px 透明実線;
            border-left: 10px 赤一色;
        }
    </スタイル>
</head>
<本文>
    <a href="" class="log">ログイン</a>
</本文>
</html>

効果は以下のとおりです。

3. クリアフローティング（以下の内容は張新旭より引用）

 <!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>疑似要素</title>
    <スタイル>
    .box{パディング:10px; 背景:グレー;}
    .fix{*ズーム:1;}
    .fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
    .l{float:left;}
    </スタイル>
</head>
<本文>
    <div class="box fix">
    <img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
</本文>
</html>

効果は以下のとおりです。