Javascript Css After

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

CSS ::選択内容の前に、選択した要素の前に挿入します。 CSS:指定された要素の後に挿入されたコンテンツの後。これらのセレクターは通常、段落またはリンクの前後にテキストを追加するために使用されます。

Webサイトを設計する場合、ページのコンテンツの前後にコンテンツを追加できます。エレメント。たとえば、リスト内の各箇条書きの前に画像を追加できます。

ここで::前と後::疑似CSS要素が入ります。これらの疑似要素を使用すると、またはの前または前にコンテンツを挿入できます。要素のコンテンツの後。

このチュートリアルでは、例を参照して、:: before andafter::疑似要素を使用してWebページのコンテンツを装飾する方法について説明します。このチュートリアルを読み終える頃には、CSSで::前と後::疑似要素を使用するエキスパートになります。

CSS疑似要素

疑似- elementは、CSSセレクターによって選択された要素の特定の部分のスタイルを設定できる特別なキーワードです。この記事では、各疑似要素がセレクターであるため、疑似要素をセレクターと呼びます。

疑似要素は、CSSまたはクラスIDを要素に追加します。たとえば、Webページの各リンクの後に「>」矢印を追加する場合は、疑似要素を使用できます。

CSSはさまざまな疑似要素を提供します。特に::最初の行、::最初の文字、::前後::。このチュートリアルでは、最後の2つ:::::前後に焦点を当てます。

疑似要素は通常、コロン(::)を使用して表されます。 CSS3は、疑似要素を宣言するための単一ドット(:)構文の使用をサポートしていますが、コロン表記を使用するのがベストプラクティスです

これは、表記コロンは、疑似クラスのプレースホルダーを区別するために使用されます。

CSS :: element pseudo-element

It :: before pseudo- l "は、要素の前に表示されるコンテンツを追加します。 Webページ多くの場合、この要素は段落の前にテキストを追加するために使用されます

疑似要素の前の::の構文は次のとおりです:..

::ビフォアセレクターが後に追加されます。セレクターを適用したい

フロントの主なコンポーネントは次のとおりです::疑似要素:

  • セレクター>は、 :: beforeを適用する必要があるため、各「one」タグの前に::要素を適用する場合、セレクターは「one」になります。または、tを含む各要素の前の要素の前にa::要素を適用する場合。クラス名「link」の場合は、「。link」セレクターを使用します。
  • :: before は、セレクターの前にCSSルールのコンテンツを追加するようにブラウザーに指示します。 li>
  • CSSルールは、セレクターの前に適用する必要のあるルールです。

CSSでセレクターがどのように機能するかについて詳しく知りたい場合は、ガイドCSSSelectorsをお読みください。

例を見て、疑似要素が機能する前の::を示します。

サンプルWebページの各リンクの前に絵文字(Ôîó)リンクを追加するとします。これは、次のコードを使用して行うことができます。

コードは次を返します:

Capture d`screen 2020年から120908 00 16
< / p>

これを行うには、CSSファイルで次のようなコンテンツプロパティを指定します。

content:"Ôîó";

ルールに絵文字リンクを追加しました作成したタグの先頭で

属性「content」の値は次のようになります。

HTML要素をcontent属性に挿入することはできません。

CSS :: after pseudo-element

CSS :: after pseudo-elementを使用すると、直後にコンテンツを追加できます。 Webページ上の要素。セレクタの前の::と同じように、後::はテキストのリンクまたは段落でよく使用されます。

Thpseudo-element::の構文は次の後にあります。

the: :after構文は、::beforepseudo-elementの構文と同じです。::前に説明した「content」属性の同じ値の後に受け入れます

::CSSの例の後

HansonsBakeryというパン屋のサイトでリンク要素を設計しているとします。このリンクには、「 Home HansonsBakeryのページに移動します。」というテキストが表示されます。リンクは、幅1ピクセルの黒い実線で囲まれている必要があります。

ラベルの後にテキストが必要です。コンテンツとともに表示されるボックスこのページの焼き菓子メニュー。 (「This」という単語の前の空白に注意してください。)ボックスには、オレンジ色のHTML背景色が必要です。

次のコードを使用してこれを行うことができます:

コードは次のようなコンテンツを生成しました:

< class figure = "wp-bloc-image"> Capture of 2020 12 09 08 00 47 1