CSS の疑似クラスと疑似要素: 後

この記事では、CSS の :after 疑似クラスと疑似要素を主に紹介します。必要な友達はそれを参照できるように共有します。CSS にはいくつかの特別な属性があります。これらは疑似クラスと呼ばれ、リンク、:visited、:hover、:active などの疑似リンクです。興味のある方は、この記事で after の使い方を詳しく紹介します。役に立つかもしれません

CSS には疑似クラスと呼ばれるいくつかの特別な属性があり、その中で最もよく使用されるのは pseudo-:link、:visited、:hover、:active などです。リンクを定義します。 これらに加えて、:focus、:first-child、:lang など、一般的には使用されない疑似クラスもいくつかあります。

CSS には疑似クラスだけでなく、:first-letter、:first-line、:before、:after などの疑似要素もあります。

この記事の他の疑似要素は当面リストされません。疑似要素以降についてだけ説明します。
After は、その名前が示すように、要素の後にという意味で、要素の後にコンテンツを追加することです。
この疑似要素を使用すると、プロデューサーは要素コンテンツの最後に生成されたコンテンツを挿入でき、オブジェクトの後に発生するコンテンツを設定するには、 content 属性とともに使用する必要があります。デフォルトでは、この疑似要素はインラインですが、表示属性を使用して変更できます。
すべての主要なブラウザは :after 疑似要素をサポートしていますが、IE の場合は IE8 以降でのみサポートされています。


以下はCSSコードに
を挿入する例です:

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

<style type="text/css"> 
h1:after {content:url(logo.gif)} 
</style> <h1>标题内容</h1>

表示されると画像が挿入されますその後タイトルの内容。これは、疑似要素 :after が行うことです。 :after 疑似クラスのコンテンツの後に他のパラメータを続けることもできます。

1: String
例:

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

<style type="text/css"> 
.test:after{content:"测试代码"}; 
</style> 
<p class="test">测试p：</p>
运行结果显示为：
测试p：测试代码

2 つ: attr (x)

、attr はその名前が示すように、このタイプのノードの属性を読み取ることです。 例:

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

<style type="text/css"> 
.test:after{content:attr(id)}; 
</style> 
<p class="test" id="aaa">测试p的id为：</p>运行结果显示为：测试p的id为：aaa

3 つ:固定パラメータ

close-quote: quotes 属性のポストマークを挿入します

no -close-quote: quotes 属性の後にタグを挿入しません。ただし、ネスト レベルを上げます。 open-quote: quotes 属性のプレタグを挿入します。 no-open-quote: quotes 属性のプレタグを挿入しません。ただし、ネスト レベルを下げてください

関連する推奨事項:

CSS の継承可能なプロパティ

以上がCSS の疑似クラスと疑似要素: 後の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。