CSS ::before &::after セレクター:実践的なハウツーガイド

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

コンテンツ:“🔗”;

「content」属性の値は次のとおりです。

• 「これは文字列です。」などの文字列。
• 「counter(li);」などのカウンター。
• 「url(/path/to/image.png)」などの画像。
• 「」などの空の文字列。

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

CSS ::after 擬似要素

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

::after 疑似要素の構文は次のとおりです。

selector::after {
 // CSS rules
}

::after の構文は、::before 疑似要素の構文と同じです。 ::after は、前に説明した「content」属性と同じ値を受け入れます。

::CSS の例

Hansons Bakery というパン屋の Web サイト上のリンク要素をデザインしているとします。このリンクには、「ハンソンズベーカリーのホームページにアクセスします。」というテキストが表示されます。 リンクは幅 1 ピクセルの黒い実線で囲まれている必要があります。

「キャリア カルマは、私が最も必要としたときに私の人生に入り込み、すぐにブートキャンプに参加するのに役立ちました。卒業から 2 か月後、私は自分の価値観と人生の目標に合致する夢の仕事を見つけました。」

Rockbot のソフトウェア エンジニア、Venus 氏

ブートキャンプにマッチするものを見つけてください

ラベルの後に、このページでは焼き菓子メニューを紹介していますという内容を含むテキストボックスを表示したいと思います。 (「This」という単語の前の空白に注意してください。) ボックスの HTML 背景色はオレンジ色になっているはずです。

このタスクは、次のコードを使用して実行できます。

index.html
<a href="/" class="label">Go to the Hansons Bakery homepage.</a>
styles.css
.label {
 border: 1px solid black;
}
.label::after {
 content: " This page shows off our baked goods menu.";
 background-color: orange;
}

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

CSS ファイルでは、クラス名 .label を持つすべての要素の周囲に幅 1 ピクセルの黒の実線境界線を適用しました。 .

次に、::after セレクターを使用して、前に説明したテキストのボックスを作成しました。テキストボックスには「このページでは焼き菓子メニューを紹介します。」という内容が表示されます。 私たちのボックスの背景はオレンジ色です。

結論

::before および ::after 擬似要素を使用すると、CSS ルールで選択した要素の特定の部分にコンテンツを追加できます。たとえば、::before セレクターを使用して、リンクの前にテキストを追加できます。 ::after セレクターを使用すると、テキストの段落の後に絵文字を追加できます。

このチュートリアルでは、例を参照しながら、CSS の疑似要素の基本と、::before および ::after 疑似要素の使用方法について説明しました。これで、プロの Web デザイナーのように、CSS コードで ::before および ::after 擬似要素を使用できるようになりました。

CSS ウェブ開発者向けの優れた学習リソース、書籍、コースに関するアドバイスについては、CSS の学習方法ガイドをご覧ください。