ホームページ  >  記事  >  ウェブフロントエンド  >  セレクターの前後を使用するにはどうすればよいですか?前後セレクターの詳しい説明

セレクターの前後を使用するにはどうすればよいですか?前後セレクターの詳しい説明

云罗郡主
云罗郡主転載
2018-11-21 17:23:174417ブラウズ

この記事の内容は、after セレクターと before セレクターの使い方についてです。前後のセレクターの詳細な説明は、必要な友人が参考にできることを願っています。

CSS3 では、::before および ::after セレクターを使用して、要素の前後にコンテンツを追加できます。これら 2 つのセレクターは、「コンテンツ属性」と組み合わせて使用​​されることが多く、最も一般的に使用されるシナリオは、フロートのクリアと小さなアイコンの作成です。

コードは次のとおりです:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 ::before和::after选择器</title>
    <style type="text/css">
        div::before
        {
            content:"php中文网";
        }
    </style>
</head>
<body>
    <div>CSS3教程</div>
</body>
</html>

図に示すように:

セレクターの前後を使用するにはどうすればよいですか?前後セレクターの詳しい説明

分析:

:: before と:: after の 2 つのセレクターは、content 属性を操作して、要素の前後にコンテンツ、画像、マルチメディアなどを挿入します。これら 2 つのセレクターは非常に便利で、さまざまな小さなアイコンのデザインにも使用できます:

セレクターの前後を使用するにはどうすればよいですか?前後セレクターの詳しい説明

上記は、after セレクターと before セレクターの使用方法です。 after および before セレクターの詳細な説明を完全に紹介します。CSS3Tutorial について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。


以上がセレクターの前後を使用するにはどうすればよいですか?前後セレクターの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はlvyestudy.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。