ATOZ CSSスクリーンキャスト：CSS擬似要素

コアポイント

• CSS擬似要素は、HTMLコードに存在しないページ上の要素であり、他の要素に適用されるCSSスタイルを使用して操作できます。
• cssの:beforeおよび:after
cssのさまざまな擬似要素には、
• 、:first-line、:first-letter、:selection、:before、:afterが含まれます。これらを使用して、要素の特定の部分をスタイリングし、要素のコンテンツの前後にコンテンツを挿入し、ブロックレベルの要素の最初の文字または最初の行などをスタイリングできます。

ビデオ説明（プレーヤーにロード...）このビデオはAtoZ CSSシリーズの一部です。このシリーズで他のコンテンツを見つけることができます。

テキストレコード

CSS擬似要素は、HTMLコードに表示されないページ上の要素です。

他の要素に適用されるCSSスタイルで操作できます。

2つの特別な擬似要素 - :beforeおよび:after - は、CSSからページコンテンツを生成し、多くの潜在的なユースケースを持つために使用できます。

このセクションでは、次のことを学びます

5つの異なる擬似要素

• テキスト、画像属性の値、およびCSSからのカウンターを生成
• 最小限のマークアップで複雑な形状を作成する方法

pseudo-element

CSSには5つの擬似要素があります：

• :first-line
• :first-letter
• :selection
• :before
• :after
これらは二重コロンによって擬似クラスと区別されますが、簡単にするために、通常、CSSの単一コロンを使用して書かれています。

ここにプレースホルダーのテキストブロックへの長い言及があります。テキストが改革された後でも適用される

を使用して、テキストの最初の行の色を変更できます。フローティングおよびより大きなフォントサイズで

のスタイルを設定することにより、初期キャップ効果を作成できます。また、:first-lineを使用して選択したテキストの色を変更することもできます。 :first-letter :selection

および

pseudo-elementsを使用して、ブロック参照の前後に大きな引用符を追加できます。テキストは:before属性から生成され、CSSスタイルを使用して望ましい効果を得ることができます。 :after content

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

コンテンツの作成< pseudo-elementsを使用すると、さまざまなコンテンツをページに追加できます。

ページにテキストコンテンツを追加する方法を確認しましたが、画像、属性値、カウンター、または空の文字列を追加して、これら2つの追加要素にアクセスすることもできます。

画像を追加すると、url()を使用して背景画像の追加に似ています。ここでは、url()属性の値としてcontentを使用します。私は実際に、contentの空の文字列を作成して、背景画像を使用して擬似要素にアクセスすることを好みます。これは、background-position、background-repeat、background-sizeなどの一般的に使用されるすべてのプロパティが利用可能であるため、画像をより強化します。

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

content

これにより、内部リンクやハッシュリンクではないリンクのリンクテキストの後にリンクが追加されます。

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

コンテンツを生成する最後の特別なケースは、挿入カウンター変数の値です。これは、法的条件の複雑なリストの番号付けに非常に役立つことがわかりました。

ここに一連のタイトルがあり、以下は一連のネストされたリストです。各章のタイトルに番号が付いていて、各リスト項目は各章の子番号です。

については、「セクション」カウンターを増やします。各章のタイトルの前に、各リスト項目の値を出力します。カウンター間に追加の文字列を追加して、複雑な数字システムを作成できます。この方法の単純化された形式を使用して、リスト内の数字または弾丸のスタイルを制御できます。

h2

a[href]:not([href*="#"]):after {
  content: attr(href);
}

shape

ページ上の各要素には2つの「余分な」要素があり、好みに応じてスタイルを整えることができるため、さまざまな複雑な形状を作成できます。

デモの例を考えている間、私はCSS-trickの形状を際立たせているのを見ました。 1つの要素で陰と陽のシンボルを作りましょう。

ボックスから始めて、

を使用して円に変換できます。円の高さに等しい

h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}

を使用して、2つの色の半円を作成できます。 2つのポイントは、擬似要素を備えた2つの円を作成し、

で配置することにより作成されます。半円の色に一致する境界を使用して、シンボルの2つの円形エンドポイントを作成できます。あなたが私に尋ねると、それはかっこいいです。 border-radius border-bottom私は擬似要素を使用するのが好きです。 position:absolute

css pseudo-elementsについてよく尋ねる質問

さまざまな種類のCSS擬似要素は何ですか？

CSS擬似要素は、要素の特定の部分をスタイリングするために使用されます。 ::before、::after、::first-letter、::first-line、::selection、::backdrop、::placeholder、::before、::after、::first-letterなど、いくつかのタイプの擬似要素があります。各擬似要素は、要素の異なる部分を標的とします。たとえば、::first-lineおよび

は、要素コンテンツの前後のコンテンツを挿入するために使用されますが、ブロックレベルの要素の最初の文字または最初の行をスタイリングするために

および::beforeが使用されます。 ::after

および::before pseudo-elementsを使用する方法は？ ::after content

および

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

ログイン後にコピー

属性を指定する必要があります。たとえば、段落の前にハートアイコンを追加するには、次のコードを使用できます。

擬似要素を使用してフォーム入力をスタイリングできますか？

::placeholderはい、擬似要素を使用してフォーム入力をスタイリングできます。ただし、すべてのフォーム入力を擬似要素を使用してスタイルとすることができるわけではありません。たとえば、

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

擬似要素を使用して段落の最初の文字をスタイリングする方法は？

::first-letter

a[href]:not([href*="#"]):after {
  content: attr(href);
}

同じ要素で複数の擬似要素を使用できますか？

はい、同じ要素で複数の擬似要素を使用できます。たとえば、コンテンツの前後にコンテンツを挿入するために、同じ要素で

および::beforeを使用できます。ただし、擬似要素の順序は覚えておくことが重要です。 ::afterpseudo-elementは常に::before pseudo-elementの前に挿入されます。 ::after

すべてのブラウザは擬似要素をサポートしていますか？

ほとんどの最新のブラウザは、擬似要素をサポートしています。ただし、一部のブラウザの古いバージョンは、すべての擬似要素をサポートしない場合があります。擬似要素を使用する前に、ブラウザの互換性を確認するのが最善です。

擬似要素と擬似クラスの違いは何ですか？

擬似要素と擬似クラスの両方が、特定の条件に基づいて要素にスタイルを適用するために使用されます。ただし、さまざまな目的に使用されます。マウスがその上にホバリングしたり焦点を獲得したりするなど、要素が特定の状態にあるときに、そのスタイルを設定するために擬似クラスが使用されます。一方、擬似要素は、要素の特定の部分をスタイリングするために使用されます。

JavaScriptで擬似要素を使用できますか？

pseudo-elementsはDOMの一部ではないため、JavaScriptを使用して直接アクセスまたは操作することはできません。ただし、JavaScriptを使用して親要素のスタイルを変更することにより、擬似要素に適用されるスタイルを変更できます。

::selectionpseudo-elementの使用方法は？

::selectionpseudo-elementを使用して、ユーザーが選択したテキストの外観を変更します。たとえば、選択したテキストの背景色とテキスト色を変更できます。例は次のとおりです。

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

擬似要素をアニメーション化できますか？

はい、CSSアニメーションまたはトランジションを使用して擬似要素をアニメーション化できます。ただし、すべてのプロパティがアニメーション化できるわけではないことを忘れないでください。たとえば、擬似要素の不透明度や変換をアニメーション化することはできますが、content属性をアニメーション化することはできません。

以上がATOZ CSSスクリーンキャスト：CSS擬似要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。