検索
ホームページウェブフロントエンドhtmlチュートリアル疑似要素について学ぶ :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 属性を使用することを好みます。

pre >

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLのブール属性とは何ですか?いくつかの例を挙げてください。HTMLのブール属性とは何ですか?いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか?HTMLコードをどのように検証できますか?Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript:Webテクノロジーの比較HTML対CSSおよびJavaScript:Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML:その機能と目的マークアップ言語としてのHTML:その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML:構造、CSS:スタイル、JavaScript:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript:比較概要HTML対CSS対JavaScript:比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール