疑似要素について学ぶ :Before と :After_html/css_WEB-ITnose

Cascading Style Sheets (CSS) の主な目的は、HTML 要素にスタイルを追加することですが、場合によっては、ドキュメントに追加の要素を追加することが冗長であるか、不可能であることがあります。実際、CSS には、ドキュメント自体を乱すことなく要素を追加できる機能があり、それが「疑似要素」です。

特にチュートリアルに従っている方は、この用語を聞いたことがあるはずです。元の著者による他の記事を参照するには、ここをクリックしてください

実際、CSS ファミリーのメンバー (CSS セレクター) には、:first-line、:first-letter、:: などの疑似要素として分類されるものがいくつかあります。選択、:前および:後。ただし、この記事では、説明を :before 要素と :after 要素に限定します。したがって、この記事の「疑似要素」は、特にこれら 2 つの疑似要素 (:before と :after) を指し、このユニークなトピックを検討するために基本から始めます。

構文とブラウザのサポートについて

擬似要素は実際にはCSS1にも存在しますが、今議論している:beforeと:afterはCSS2.1でリリースされたものです。当初、疑似要素の構文は「:」 (コロン 1 つ) でしたが、Web の発展に伴い、CSS3 の改訂された疑似要素では、「:: 前」と「:: 後」が使用されました。 ? 疑似要素と疑似クラスを区別するため (:hover、:active など)

ただし、単一コロンを使用しても二重コロンを使用しても、ブラウザはそれらを認識できます。 IE8 はシングルコロン形式のみをサポートしているため、安全上の理由から、より幅広いブラウザ互換性が必要な場合はシングルコロン形式を使用してください。

その動作

つまり、擬似要素は content 要素の前後に追加の要素を挿入するため、次のマークアップを使用してそれらを追加すると、技術的には同等になります。

しかし、これらの要素は実際にはドキュメント内に生成されません。これらは外部からは表示されますが、ドキュメントのソース コード内では見つからないため、実質的には「偽の」要素です。

:before t; t;:後 ;/ p>

疑似要素の使用 疑似要素の使用は比較的簡単で、:before はコンテンツの前に要素を「追加」し、:after はコンテンツの後に要素を「追加」します。それらの間にコンテンツを追加するには、content 属性を使用します。

例えば、次のコードスニペットは引用符の前後に引用符を追加します。

blockquote:before { content : open-quote ;

blockquote:after {

content : close-quote;

疑似要素のスタイル

「偽の」要素であっても、実際には、疑似要素は、色の変更、背景色の追加、フォント サイズの調整など、任意のスタイルを追加できます。テキスト内のテキストの調整など。

blockquote:before { content: open-quote; font-size: 24pt; text-align: center ; 行の高さ : 42px ;色: #fff ; 背景: #ddd ; 位置: 相対 ; ブロック引用: 後 { 内容 : フォントサイズ: 24pt; 疑似要素のサイズを指定する デフォルトで生成される要素はインライン要素なので、高さと幅を指定したい場合は、最初にdisplay: blockを使用してそれらがブロックであることを宣言する必要があります。レベル要素。 floatが設定されているので、display:blackを設定する必要はありません。

blockquote:before { content: open-quote;

font-size: 24pt;

text -align : center ;

行の高さ : 42px ; 色: #fff;

浮動小数点: 左;

上部: 30 ピクセル;

高さ: 25 ピクセル幅: 25px ; blockquote:after {

content: close-quote;

text-align: center;

color: #fff;背景: #ddd;

位置: 相対;

高さ: 25 ピクセル;

関連する背景画像

プレーンテキストだけでなく、コンテンツを画像に置き換えることもできます。 content 属性には画像を挿入するための url() が用意されていますが、多くの場合、画像をより適切に制御するために、background 属性を使用することを好みます。

blockquote:before { content : " " ; text-align : 中央 ; 行-高さ: 42px; 色: #fff; 位置: 相対; 境界半径: 25px; -3px -3px #ddd ; 高さ : 25px ; コンテンツ : " " ; テキスト-整列: 中央; カラー: #fff; 境界線: 25 ピクセル; : URL (images/quotemark.png) -1px -32px #ddd ; 表示 : ブロック ; 高さ : 25px ; 上記のコードスニペットからできるようにでわかるように、引き続き content 属性を宣言し、今回は空の文字列を使用します。 content 属性は必須であり、頻繁に使用する必要があります。そうしないと、いずれにしても擬似要素が正しく動作しません。 疑似クラスの結合 疑似クラスにはさまざまな種類がありますが、追加すると、引用符の背景色が若干暗くなります。 blockquote:hover:after, blockquote:hover:before { 背景色 : #555; トランジション効果を追加 適用することもできます疑似要素のトランジション属性を使用して、美しい色のトランジションを作成します。

トランジション: すべて 350 ミリ秒;

-o-トランジション: すべて 350 ミリ秒;

-webkit-遷移: すべて 350ms

さらなるインスピレーション

あなたにインスピレーションを与えるために、Web デザインに関する多くのアイデアを提供する 3 つのクールな例を選択しました。

魅力的なシャドウ

このチュートリアルでは、Paul Underwood がよりリアルで魅力的なシャドウ効果を作成する方法を説明します。

疑似要素 :before と :after を使用します。どちらも絶対的に配置され、負の Z インデックスを使用して画像の後ろに配置し、シャドウ効果を実現します。

3D Button

これはCSSと単一のアンカーテキストのみを使用して、CSS3のbox-shadowと組み合わせた疑似要素を使用して素晴らしい3Dボタンを描画する非常に賢い実装です。疑似要素: before は、ボタンの左側に数字「1」を追加するために使用されます。

オーバーレイ画像効果

擬似要素を使用して、画像タグのみに基づいて「乱雑な」オーバーレイ画像効果を作成することも可能です。擬似要素は、負の Z インデックス値を使用して実際の画像の背後に「オーバーレイ」画像を作成することにより、画像が重なっているような錯覚を作り出すために使用されます。

結論

疑似要素はクールで実際の作業に適用できます。基本的に、追加するすべての要素は既存の HTML 構造に干渉せず、疑似要素は考えられることのほとんどすべてを行うことができます。 。

実際には、ネストされた疑似要素 div::before::before { content: ” } や複数の疑似要素 div::before(3) など、疑似要素の改善が現在段階的に行われています。 ） { コンテンツ： "; }。将来の Web デザインでは、これらの改善により、デザインにさらに多くの形式 (より多くの可能性) が与えられることは明らかです。ただし、最新のブラウザではサポートされる予定ですので、今は気長に待ちましょう。

出典: Thoriq Firdaus