CSS ::before と ::after pseudo-elements_html/css_WEB-ITnose について知らないこと

この記事も同様に、プログラミング生活についての洞察からインスピレーションを受けています。

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

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

1 基本文法

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

Html code

1. p :before {}

ただし、CSS3 では疑似要素と疑似クラスを区別するために二重コロンを使用するため、表示や幅などの属性を使用して元の要素と表示を区切る場合は、これを使用することをお勧めします。標準の二重コロンに従って書きます。古すぎるブラウザにはサポートの問題がある可能性がありますが、ほとんどの疑似要素は CSS3 で使用されるため、下位互換性を保つ必要はありません:

Html code

1. img::after {}

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

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

Html code

1. a:after { content: "?"; }

attr() ? の変更などに便利な、現在の要素の属性を呼び出します。画像の Alt プロンプト テキストまたはリンクの Href アドレスが表示されます。例:

HTML コード

1. a:after { content:"(" attr(href) ")" }

url() / ?書類。例:

Html コード

h1::before { content: url(logo.png); }

counter()

? を呼び出すことで、シリアル番号関数を実装できます。リスト要素を使用します。詳細については、counter-increment 属性と counter-reset 属性の使用法を参照してください。例:

HTML コード

h2:before { counter-increment: Chapter; content: "Chapter " counter(chapter) " }

二高度なヒント

Cl耳が浮く はい A多くの人が解決する一般的な問題は、空の div を追加して、clear:both 属性を適用することです。これで、意味のない要素を追加する必要はなくなりました。必要なのは、要素の末尾にあるフロートを自動的にクリアする次のスタイルだけです。 : 1; }

.clear-fix:after { 表示: テーブル; コンテンツ: ""; クリア: 両方;

この場合、:before を使用して背景を置き換えることができます。つまり、背景用のスペースを残すことができ、画像の代わりにテキストを直接使用することもできます:

1. Html コード
2. 1. blockquote::before {
   2. content: open-quote;
   3. z-index: -1;
   4. color: #DDD;
   5. font-family : serif;
   6. font-weight:older;
   7. }
   3 つの特殊効果

   CSS の強力な配置と特殊効果機能を使用して、最大 100 個まで追加できます% より単純な要素 2 つのコンテナの効果。注意すべき点の 1 つは、コンテンツがエフェクトを作成するために style 属性と連携することだけを必要としない場合、 content 属性を空にすることはできない、つまり content:"" であることです。そうしないと、他のスタイル属性が有効になりません。

   角括弧が一時停止中に表示されます

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

   Html code

   a {

   位置: 相対;
   1. 表示:インラインブロック
   2. アウトライン: なし ;
   3. テキスト装飾: なし;
   4. フォントサイズ: 32px
   5. }
   a:h上::前、 :hover::after { 位置: 絶対; }
   a:hover::before { コンテンツ: "5B"; 左: -20px; }
   8. a:hover::after { コンテンツ: "5D";同様に、display: block とposition:Absolute を一致させるだけで、これらを 2 つのコンテナとして扱い、それらを結合して浮動二重枠効果を作成できます。 {
   9. 位置: 相対;
   10. 表示: インラインブロック;
   11. テキスト装飾: なし;
   12. フォントサイズ: 0 10ピクセル;
   13. }
   /* 大きなフレーム */
   a:hover::before、a:hover::after {
   内容: ""

   位置: 絶対;

   上: -15%%;

   幅: 120%;
   1. ボーダー幅: 4px; border-color : #DDD;
   3. /* 小さなボックス */
   4. a:hover::after {
   5. 上: 0%;
   6. 幅: 100%;
   7. height : 100%;
   8. border-width: 2px;
   9. }
   11. この記事も同様に、プログラミング生活についての洞察に基づいています。 :before および :after 疑似クラスを使用して、CSS3 のより強力な機能を組み合わせることで、多くの興味深い特殊効果やハックを完成させることもできます。これは単なる出発点にすぎません。