CSS の ::before と ::after 疑似要素について知らないこと

CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります。これらはカスタム書式設定を追加するために使用されることもありますが、その機能はこれに限定されません。数日前、クリエイティブ リンク エフェクトを紹介する非常に興味深いページ、Creative Link Effects を見つけました。このページの素晴らしいエフェクトは、変形用の transform 属性に加えて、次に紹介する 2 つの疑似要素など、多くの機能を使用しています。

クリエイティブなボタンスタイル

基本的な文法

高度なアプリケーションを理解する前に、まず文法規則を理解しましょう。通常、カスタム文字を追加するためにこれら 2 つの疑似要素のみを使用する必要がある場合は、ブラウザーの互換性を確保するために、疑似クラスで使用される単一のコロン表記を使用します。

ただし、CSS3では疑似要素と疑似クラスを区別するために二重コロンを使用します。そのため、displayやwidthなどの属性を使用してdisplayを元の要素と区別する場合は、標準に従って二重コロンで記述することが推奨されます。古いブラウザではサポートの問題があるかもしれませんが、疑似要素は主に CSS3 で使用されるため、下位互換性は大きな問題ではありません。

これら 2 つの疑似クラスに固有のコンテンツ属性は、CSS レンダリングで要素の論理的な先頭または末尾にコンテンツを追加するために使用されます。これらの追加はドキュメントの内容を変更せず、DOM に表示されず、複製できず、CSS レンダリング レイヤーにのみ追加されることに注意してください。次の値はより便利です:

•[文字列] - 文字列を引用符で囲むと、その文字列が要素コンテンツに追加されます。例：

2番目の上級スキル

フロートのクリアは、頻繁に発生する問題です。多くの人の解決策は、空の div を追加して clear:both; 属性を適用することです。これで、意味のない要素を追加する代わりに、要素の末尾のフロートを自動的にクリアする次のスタイルだけが必要になります。

多くの人は、blockquote の背景に大きな引用符を追加することを好みます。この場合、background の代わりに :before を使用できます。これにより、背景用のスペースが確保され、画像の代わりにテキストを使用できます。

3つの特殊効果

単に文字を追加するだけでなく、CSS の強力な配置機能と特殊効果機能を使用すると、単純な要素に最大 2 つのコンテナーを追加することも可能です。注意すべき点は、コンテンツが不要で、スタイル属性のみを使用して効果を生み出す場合、コンテンツ属性を空にすることはできない (つまり、content:””) ということです。そうしないと、他のスタイル属性は有効になりません。

マウスオーバーすると角括弧が表示されます

リンクの上にマウスを移動すると、角括弧が表示されます。

同様に、display: block と position: absolute を使用するだけで、2 つのコンテナーとして扱い、それらを組み合わせて、中断時に二重境界線効果を作成できます。

CSS ::before および ::after 疑似要素の知られざる使用法に関する上記の記事は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナル URL: http://www.cnblogs.com/androidshouce/archive/2016/06/12/5576493.html