CSSで疑似要素の前後を使用する方法

CSSで疑似要素の前後を使用する方法

疑似要素は、CSSで使用できるより高度なセレクターの1つです。これらのセレクターの背後にある主な目的は、特定のWebページの基本構造を作成するために使用されるHTMLドキュメントを変更せずに、独自のスタイルを作成することです。





CSSで疑似要素を使用する方法は次のとおりです。



vizioスマートテレビにアプリを追加するにはどうすればよいですか

一般的な疑似要素

Web開発者の生活を楽にするために利用できる疑似要素の広範なリストがあります。これらの疑似要素には、次のものがあります。





  • 前
  • 後
  • 背景
  • 第一線
  • 最初の一文字

特定の状況では、一部の疑似要素が他の要素よりも適していることがわかりますが、一定のままである1つのことは、任意の疑似要素を使用するための一般的な構造です。

疑似要素構造の例


selector::pseudo-element{
/* css code */
}

HTML要素をセレクターとして使用できますが、レイアウト内の意図しない要素をターゲットにしないように、クラスまたはIDを使用することをお勧めします。目的の位置に挿入する要素、スタイル、またはデータは、中括弧の間に配置する必要があります。



前後の疑似要素はリストで最も人気があり、それらを使用する多くの実用的な方法があることを考えると、理由を理解するのは難しいことではありません。

CSSでBeforePseudo要素を使用する

不可能ではありませんが、CSSで画像を読み取り可能なテキストでオーバーレイすることは困難です。これは主に、画像とテキストがWebページ上の同じ位置を占めるためです。



比較的簡単です テキストのグループの背景に画像を送信する 、しかし、その画像が明るすぎると、その上にあるテキストを圧倒する傾向があります。このような場合、次のステップは、opacityプロパティを使用して画像の不透明度を下げようとすることです。

唯一の問題は、画像とテキストが同じ位置を占めるため、テキストもある程度透明になることです。



この問題を解決するための数少ない効果的な方法の1つは、before疑似要素を使用することです。

Before疑似要素の例の使用


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

上記のコードは、以下のHTMLlandingPageクラスと連携して使用するために作成されています。上記のコードに示されているように、before疑似要素を使用することで、画像をターゲットにして、画像がテキストと結合される前に不透明度プロパティを使用できます。





This is the result of using the before pseudo-element
to overlay and image with readable text.


これにより、下の画像に示すように、オーバーレイが画像に配置され、クリアテキストが上に表示されます。

CSSでAfterPseudo要素を使用する

after疑似要素の実際の使用法は、HTMLフォームの作成を支援することです。ほとんどのフォームは、フォームを正常に送信するためのデータを必要とする一連のフィールドで作成されます。

フォームのフィールドにデータが必要であることを示す1つの方法は、このフィールドのラベルの後にアスタリスクを配置することです。 after疑似要素は、これを行うための実用的な方法を提供します。

After疑似要素の例の使用


.required::after{
content: '*';
color: red;
}

上記のコードをフォームのCSSセクションに挿入すると、必要なクラスを含むすべてのラベルの直後に赤いアスタリスクが表示されます。 after疑似要素は、スタイリングを構造から分離するのに役立つため、この例でも実用的です（これは、ソフトウェア開発では常に理想的です）。

無線LANなしでインターネットを取得する方法

コンテンツプロパティ

上記の疑似要素の後の例に示されているように、contentプロパティは、新しいコンテンツをWebページに挿入するために使用されるツールです。このプロパティは、preforeおよびafter疑似要素でのみ使用されます。

contentプロパティにフィードできるコンテンツがない場合でも（上記のbefore疑似要素の例のように）、beforeまたはafterのパラメーター内でcontentプロパティを使用する必要があることに注意してください。それらを意図したとおりに機能させるための疑似要素。

これで、CSSで疑似要素を使用できます

この記事では、CSSプログラムで疑似要素を識別して使用する方法を学びました。疑似要素の前後を紹介し、両方を使用する実用的な方法を説明しました。また、beforeおよびafter疑似要素を正常に使用するためにcontentプロパティが必要な理由を確認することもできました。

共有 共有 つぶやき Eメール 10分で学ぶことができる10の簡単なCSSコード例

CSSのサポートが必要ですか？これらの基本的なCSSコード例を最初に試してから、独自のWebページに適用してください。

次を読む 関連トピック
  • プログラミング
  • ウェブデザイン
  • CSS
著者について カデイシャキーン（21の記事が公開されました）

Kadeisha Keanは、フルスタックソフトウェア開発者およびテクニカル/テクノロジーライターです。彼女は、最も複雑な技術的概念のいくつかを単純化する明確な能力を持っています。技術初心者なら誰でも簡単に理解できる素材を作る。彼女は、執筆、興味深いソフトウェアの開発、そして（ドキュメンタリーを通じて）世界中を旅することに情熱を注いでいます。

KadeishaKeanのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください