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

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

Creative Button Styles

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

基本的な文法

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

CSSコードコンテンツをクリップボードにコピー

p:前{}

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

CSSコードコンテンツをクリップボードにコピー

img::after {}

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

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

CSSコードコンテンツをクリップボードにコピー

•a:after {コンテンツ: "↗" ; }

attr() – 現在の要素の属性を呼び出します。これは、たとえば、画像の Alt テキストやリンクの Href アドレスを表示するのに便利です。例：

CSSコードコンテンツをクリップボードにコピー

•a:after {コンテンツ: "(" 属性(href) ")" ; }

url() / uri() – メディアファイルを参照するために使用されます。例：

CSSコードコンテンツをクリップボードにコピー

•h 1: :before {コンテンツ: url (logo.png); }

counter() – リスト要素を使用せずにシリアル番号機能を実装するためにカウンターを呼び出します。詳細については、counter-increment プロパティと counter-reset プロパティの使用法を参照してください。例：

CSSコードコンテンツをクリップボードにコピー

h 2: before { counter counter-increment : chapter; content : "Chapter " カウンター（章）「.」 }

2番目の上級スキル

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

CSSコードコンテンツをクリップボードにコピー

. clear -fix { *オーバーフロー:非表示; * ズーム: 1; }
. clear -fix:after { display : table; content : "" ; width : 0; clear : both ; }

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

CSSコードコンテンツをクリップボードにコピー

ブロック引用::前{
内容:引用符を開く;
位置:絶対;
zインデックス: -1;
色: #DDD ;
フォントサイズ: 120px ;
フォントファミリー: serif ;
フォントの太さ:太字;
}

3つの特殊効果

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

懸浮出現方括號