コアポイント
:beforeおよび:first-line、:first-letter、:selection、:before、:afterが含まれます。これらを使用して、要素の特定の部分をスタイリングし、要素のコンテンツの前後にコンテンツを挿入し、ブロックレベルの要素の最初の文字または最初の行などをスタイリングできます。 ビデオ説明（プレーヤーにロード...）このビデオはAtoZ CSSシリーズの一部です。このシリーズで他のコンテンツを見つけることができます。
テキストレコード
CSS擬似要素は、HTMLコードに表示されないページ上の要素です。
他の要素に適用されるCSSスタイルで操作できます。
2つの特別な擬似要素 - :beforeおよび:after - は、CSSからページコンテンツを生成し、多くの潜在的なユースケースを持つために使用できます。
5つの異なる擬似要素
CSSには5つの擬似要素があります：
:first-line :first-letter :selection :before :after
ここにプレースホルダーのテキストブロックへの長い言及があります。テキストが改革された後でも適用される
を使用して、テキストの最初の行の色を変更できます。フローティングおよびより大きなフォントサイズでのスタイルを設定することにより、初期キャップ効果を作成できます。また、: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;
}ページにテキストコンテンツを追加する方法を確認しましたが、画像、属性値、カウンター、または空の文字列を追加して、これら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;
}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);
}ページ上の各要素には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つの円形エンドポイントを作成できます。あなたが私に尋ねると、それはかっこいいです。 border-radius
border-bottom私は擬似要素を使用するのが好きです。 position:absolute
css pseudo-elementsについてよく尋ねる質問
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;
}
および
はい、CSSアニメーションまたはトランジションを使用して擬似要素をアニメーション化できます。ただし、すべてのプロパティがアニメーション化できるわけではないことを忘れないでください。たとえば、擬似要素の不透明度や変換をアニメーション化することはできますが、 以上がATOZ CSSスクリーンキャスト：CSS擬似要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。::placeholderはい、擬似要素を使用してフォーム入力をスタイリングできます。ただし、すべてのフォーム入力を擬似要素を使用してスタイルとすることができるわけではありません。たとえば、li:before {
content: url(star.png);
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
}擬似要素を使用して段落の最初の文字をスタイリングする方法は？
a[href]:not([href*="#"]):after {
content: attr(href);
}
はい、同じ要素で複数の擬似要素を使用できます。たとえば、コンテンツの前後にコンテンツを挿入するために、同じ要素で::beforeを使用できます。ただし、擬似要素の順序は覚えておくことが重要です。 ::afterpseudo-elementは常に::before pseudo-elementの前に挿入されます。 ::after
ほとんどの最新のブラウザは、擬似要素をサポートしています。ただし、一部のブラウザの古いバージョンは、すべての擬似要素をサポートしない場合があります。擬似要素を使用する前に、ブラウザの互換性を確認するのが最善です。
擬似要素と擬似クラスの両方が、特定の条件に基づいて要素にスタイルを適用するために使用されます。ただし、さまざまな目的に使用されます。マウスがその上にホバリングしたり焦点を獲得したりするなど、要素が特定の状態にあるときに、そのスタイルを設定するために擬似クラスが使用されます。一方、擬似要素は、要素の特定の部分をスタイリングするために使用されます。
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;
}擬似要素をアニメーション化できますか？
content属性をアニメーション化することはできません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
