BinaryDevelop
  1. ホーム
  2. html

[解決済み] ::beforeは実際に何をするのですか？

2022-03-11 18:32:19

質問

ドキュメントを読んで、おそらくその目的を理解した上で ::before と ::after . 私の理解が正しければ、これらは常に他の要素との組み合わせで機能するはずです。しかし、私が見ているWebページには、次のようなものがあります。 

<body>
    <div class="container-fluid">
        ::before
        <div> ... </div>
        ::after
    </div>
<body>

を理解することができません。 ::before と ::after は、ここで何をしているのでしょうか？

解決方法は？

::before と ::after を参照してください。 CSS擬似要素 のように、一致する要素の前後に作成されます。

疑似要素は、通常、HTMLの要素ツリーには表示されません。しかし、適切な種類のデバッグツール（Chromeインスペクタなど）を使用している場合、これらの特殊な要素を見ることができます。今日では、疑似セレクタを使用してページをスタイルすることは非常に一般的であるため、疑似要素を表示できるデバッグツールは非常に便利です。

Chromeインスペクタ（またはその他のツール）でこの動作を確認するには、例えば、CSSでこれらの疑似要素のいくつかにコンテンツを追加してみてください。 

h1:before {
  content: 'before';
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します