CSSの::beforeと::after 、非代替要素を使用することができます（たとえば、それらは適しています。<div>しかし、該当しません<code><img alt="::前の:: :: cssの擬似要素のための7つの実用的な用途" >）「コンテンツ」を前後に挿入します。これにより、実際には、HTMLコンテンツに存在しない可能性のあるWebページにコンテンツを表示できます。アクセシビリティの点ではあまり良くないため、実際のコンテンツに使用しないでください。この方法でページに挿入されたテキストを選択してコピーすることさえできないためです。この記事では、 ::beforeと::after使用して興味深い効果を作成する方法を示す7つの異なる例を説明します。
ほとんどの例では、CSS擬似要素に特に関連するコードセクションのみを説明することに注意してください。つまり、他のスタイルのコードを見たい場合、すべてのCSSが組み込みデモに含まれています。
ユーザーがあなたのウェブサイトにアクセスすると、インターネット接続（または制御を超えた要因）は、画像のダウンロードを防ぐ可能性があるため、ブラウザは破損した画像アイコンと画像の代替テキストを表示します（存在する場合）。
代わりにカスタムプレースホルダーを使用する方法は？これは::beforeと::after cssポジショニングを使用して行うことができます。
まず、画像要素に相対的なポジショニングを使用する必要があります。後で擬似要素の1つに絶対的な位置を使用します。そのため、この相対的な位置により、擬似要素がドキュメントストリームから完全に外れるのではなく、画像要素の内容内にあることが保証されます。
img {
表示：ブロック; /*行の高さによって引き起こされる画像の下のスペースを避けてください*/
位置：相対;
幅：100％;
}次に、画像を擬似する::beforeを使用して、画像効果を破壊する領域を作成しましょう。まず、明るい灰色の背景と少し暗い境界線でスタイルを整えます。
img :: before {
背景色：HSL（0、0％、93.3％）;
境界線：1pxダッシュHSL（0、0％、66.7％）;
/ * ... */
}<img alt="::前の:: :: cssの擬似要素のための7つの実用的な用途" >交換要素です。なぜ::before ？うまくいきません！正しい。この場合、画像が読み込まれない場合、擬似エレメントがChromeとFirefoxに表示されます。これはまさにあなたが望むものです。一方、Safariは、代替テキストに適用されるスタイルのみを表示します。
スタイルは、破損した画像の左上隅に適用されます。
これまでのところ、すべてがうまくいきました。これで、ブロックレベルの要素（ display: block ）に設定し、利用可能なスペース全体を埋めるために高さを与えることができます。
img :: before {
/ * ... */
表示：ブロック;
高さ：100％;
}さらにスタイルを向上させることができます。たとえば、コーナーを回りましょう。また、擬似要素の全幅と絶対的な位置を提供して、コンテンツの配置をより適切に制御することにより、代替テキストのスペースを残す必要があります。
img :: before {
/ * ... */
ボーダーラジウス：4px;
コンテンツ： "";
位置：絶対;
幅：100％;
}ここで停止して仕事をチェックすると、代替テキストが突然消えてしまうので、頭を掻くことができます。
これは、 content空の文字列（生成したコンテンツとスタイルを表示する必要がある）に設定し、実際の代替テキストを含むスペース全体を上書きするためです。そこにあります、私たちはそれを見ることができません。
今回は、 ::after pseudo-elementの助けを借りて、代替テキスト（取得？）によって表示できます。 content属性は、実際にattr()関数を使用して、画像のalt属性テキストを表示できます。
IMG :: After {
コンテンツ：attr（alt）;
/*いくつかの簡単なスタイル*/
font-weight：bold;
位置：絶対;
高さ：100％;
左：0px;
テキストアライグ：センター;
トップ：1px;
幅：100％;
}これは素晴らしいです！少なくともクロムで。
ただし、Firefoxの場合はそうではありません。
簡単な回避策は、プロパティセレクター（この場合はimg[alt] ）を使用してalt属性を直接見つけ、Chromeに合わせて同様のスタイルを配置することです。
img [alt] {
テキストアライグ：センター;
font-weight：bold;
色：HSL（0、0％、60％）;
}これで、ChromeとFirefoxで一貫した優れたプレースホルダーがいます。
ブロックの引用は、作品からの引用または抜粋です。また、視覚的に興味深いコンテンツでテキストの壁を壊す非常に良い機会を提供します。
参照をブロックするさまざまな方法があります。クリスには、2007年にさかのぼる5スタイルのセットがあります。
私は別::afterテクニックを見たいと思います::before前の例で見たように、 contentプロパティを使用して生成されたコンテンツを表示し、それを飾るために他のプロパティを適用できます。ブロックリファレンスの最初と終わりに大きな引用を置きましょう。
HTMLは簡単です：
<blockquote> </blockquote>
CSSのいくつかの装飾：
blockquote {
フォントスタイル：イタリック;
ラインハイト：1.618;
フォントサイズ：1.2em;
幅：30EM;
位置：相対;
パディング：40px 80px;
} position: relative 。あなたが学ぶように、ブロック参照を配置することが重要であるためです。
ご想像のとおり、最初の引用の::before ::after終了の引用を使用します。これで、両方のcontentプロパティを呼び出して、そのタグを生成するだけです。ただし、CSSはopen-quoteとclose-quote値を提供します。
blockquote :: before {
コンテンツ：Open-Quote;
/*左上隅に配置*/
上：0;
左：0;
}
blockquote ::後{
コンテンツ：クローズクオート;
/*右下隅に配置*/
下：0;
右：0;
}これにより、私たちが望む引用が与えられますが、私はスタイルを少し整理することを許します：
blockquote ::前、
blockquote ::後{
バックグラウンドカラー：#cccccccc;
表示：ブロック;
幅：60px;
高さ：60px;
ラインハイト：1.618;
font-size：3em;
ボーダーラジウス：100％;
テキストアライグ：センター;
位置：絶対;
}HTMLに注文があります（<ol></ol> ）および障害（<ul></ul> ）リスト。どちらも、ブラウザユーザーエージェントStyleSheetによって決定されたデフォルトスタイルを持っています。ただし、Pseudo-Element ::before使用すると、これらの「デフォルト」スタイルを独自のコンテンツでオーバーライドできます。何だと思う？ contentプロパティで絵文字（？）を使用できます！
.name-listli :: before {
コンテンツ： "？";
マージン右：15px;
フォントサイズ：20px;
}これは良いことですが、実際に::marker擬似要素を使用できることは注目に値します。これは、リストマーカーのスタイルに特に使用されます。エリック・マイヤーは、それがどのように機能するかを示しています。これは、長期的にはより良いアプローチかもしれません。
フォームをスタイルする最も賢いトリックの1つは、標準のHTMLチェックボックスを使用してトグルスイッチを作成することです。実際、Preethi Samは最近、CSSマスクを使用して他のチェックボックススタイルのヒントを表示するときに方法を共有しました。
名前が示すように、トグルスイッチは、チェックボックス要素の選択されていない状態を切り替えるために使用されます。
<label> <input type="checkbox"> </label>
すべてのカスタマイズは::before ::afterに追加されることによるものです<label></label>要素の変更。しかし、最初に、ここにいくつかあります<label></label>要素の基本的なCSS：
。容器 {
背景：＃212221;
背景：線形勾配（右、＃1560bd、＃e90）;
ボーダーラジウス：50px;
高さ：40px;
位置：相対;
幅：75px;
}すべてのスペースを占有しながら、チェックボックスのデフォルトの外観を非表示にします。奇妙な？目に見えませんが、技術的にはまだ存在します。これを行います：
入力{
-webkit-acpearance：none; / * safari */
カーソル：ポインター; /*それがインタラクティブな要素であることを示す*/
高さ：100％;
位置：絶対;
幅：100％;
}次に、擬似要素設定::beforeを使用しましょう<input>要素のスタイル。このスタイルは、入力の外観を変更し、最終結果に近づきます。
入力:: before {
背景：#ffff;
ボーダーラジウス：50px;
コンテンツ： "";
高さ：70％;
位置：絶対;
トップ：50％;
変換：翻訳（7px、-50％）; /*スタイルを要素の中心に移動します*/
幅：85％;
}なに、待っていますか？あなたはそれを::before交換要素で動作しないと思うかもしれません。<input> 。これは正しいですが、入力型が画像である場合にのみ、これは<img alt="::前の:: :: cssの擬似要素のための7つの実用的な用途" >要素。他のフォームコントロール（チェックボックスなど）は、HTML仕様の非代替要素として定義されます。
次に、「トグル」ボタンを作成する必要があります。これは、 ::after擬似エレメントを使用して作成できることがあります。ただし、言及する価値のある2つのポイントがあります。
transformプロパティを使用して移動します<input>の中心。入力::後{
背景：線形勾配（右、オレンジ、＃8E2DE2）;
ボーダーラジウス：50px;
コンテンツ： "";
高さ：25px;
不透明度：0.6;
位置：絶対;
トップ：50％;
変換：翻訳（7px、-50％）;
遷移：すべて.4S;
幅：25px;
} [トグル]ボタンをクリックしてみてください。何も起こりませんでした。これは、実際には変更されなかったためです<input>選択されたステータス。たとえそれを変更しても、結果は…不快です。
解決策は:checkedを適用することです<input>::擬似要素::after 。チェックボックスの選択した状態を具体的に配置し、 ::afterにリンクすることにより、トグルボタンを元の位置に戻すことができます。
入力：チェック::後{
不透明：1;
変換：翻訳（170％、-50％）;
}境界線で画像を飾り、それらを目立たせたり、デザインにシームレスに溶け込んだりすることができます。境界で勾配を使用できることをご存知ですか？まあ、私たちは::before使用することができます（そしてもちろん他の方法があります）。
コアのアイデアは、画像に勾配を作成し、CSS z-index属性と負の値を使用することです。負の値は、積み重ね順に画像の下に勾配を引きます。これは、勾配が負のz-indexを持っている限り、画像が常に上に表示されることを意味します。
.gradient-border :: before {
/*スタイルを与える*/
コンテンツ： "";
/*スペース全体を埋める*/
位置：絶対;
上：0;
左：0;
下：0;
右：0;
/*勾配を作成*/
背景イメージ：線形勾配（＃1A1A1A、＃1560BD）;
/*画像の後ろの勾配を積み重ねる*/
z -index：-1;
}
形 {
/*デフォルトのマージンを削除*/
マージン：0;
/*画像を絞ってその背後にある勾配を表示する*/
パディング：10px;
}これは、前の例で行ったことと似ていますが、ここでは画像の上部に勾配を適用しています。なぜこれを行うのですか？画像にテクスチャと深さを追加するのに最適な方法です。または、読みやすさを改善するために特別なコントラストを必要とするテキストが上部にある場合、画像を明るくしたり暗くしたりするために使用できます。
これは私たちがやったことに似ていますが、いくつかの明らかな違いに気付くでしょう。
図::前{
背景画像：線形勾配（右上、＃1A1A1A、透明）;
コンテンツ： "";
高さ：100％;
位置：絶対;
幅：100％;
}見たことがありますか？画像の上に勾配を積み重ねても大丈夫なのでz-indexありません。また、バックグラウンド勾配に透明性を導入します。これにより、画像を勾配を通して表示できます。あなたは、重ね合わせのように知っています。
ほとんどではないにしても、ほとんどの場合、HTMLラジオボタンのデフォルトスタイルをカスタマイズしようとします。これは、以前のチェックボックスで行ったように、通常::before ::after行われます。
最初にいくつかの基本的なスタイルを設定しましたが、準備するだけです。
/*すべてのコンテンツを中心に*/
.flex-center {
Align-Items：Center;
ディスプレイ：Flex;
justify-content：center;
}
/*フォーム要素のスタイル*/
。形状 {
背景：#ccc;
高さ：100VH;
幅：100％;
}
/*入力スタイル*/
.form-row {
背景：#ffff;
ボーダーラジウス：50px;
高さ：40px;
マージン：10px;
オーバーフロー：隠し;
位置：相対;
幅：150px;
}次に、 appearance: none;ラジオボタンのデフォルトスタイルを削除するには：
.form-input {
-webkit-acpearance：none; / * safari */
外観：なし;
} ::beforeラジオボタンの左上隅にある必要があり、選択したときにその背景色を変更します。
.form-input :: before {
/*スタイルを与える*/
コンテンツ： '';
/*インタラクティブであることを示します*/
カーソル：ポインター;
/*入力の左上隅に配置*/
位置：絶対;
上：0;
左：0;
/*スペース全体を占める*/
高さ：100％;
幅：100％;
}
/*入力が選択されたとき...*/
.form-input：checked :: before {
/*背景色の変更*/
背景：＃21209C;
}いくつかの問題を解決するため::after 、まだ使用する必要があります。具体的には、ラジオボタンが選択されている場合、現在の状態ではリングが青であるため、円形のリングの色を白に変更します。
.form-input ::後{
/*スタイルを与える*/
コンテンツ： '';
/*インタラクティブであることを示します*/
カーソル：ポインター;
/*いくつかのボーダースタイル*/
ボーダーラジウス：50px;
国境：4pxソリッド＃21209c;
/*ポジショニングリング*/
位置：絶対;
左：10％;
トップ：50％;
変換：翻訳（0、-50％）;
/*サイズを設定*/
高さ：15px;
幅：15px;
}
/*入力が選択されたとき...*/
.form-input：checked :: afted {
/*::後の境界線を白に変更*/
ボーダー：4pxソリッド#ffffff;
}フォームタグはここでも利用できません。フォームラベルを直接配置して色を追加する必要があり、フォーム入力が選択されている場合、色を可視色に変更します。
.form-label {
色：＃21209C;
Font-Size：1.1Rem;
マージン左：10px;
}ボタンをクリックすると、まだ反応するものはありません。どうしたの？ position: absolute on ::before ::after 、HTMLドキュメント階層で発生するものはすべて、HTMLドキュメントの新しい場所に移動しない限り不明瞭になります。したがって、ラジオボタンが選択されるたびに、そのラベルが上書きされます。
以前の別の例で同様の問題を解決したので、おそらくこの問題を解決する方法をすでに知っているでしょうか？ z-index: 1 （またはposition: absolute ）を適用してタグを形成します。
.form-label {
色：＃21209C;
Font-Size：1.1Rem;
マージン左：10px;
z-index：1; /*ラベルが上部に積み重ねられていることを確認してください*/
/*位置：絶対;これは代替オプションです*/
}::before ::after興味深い効果を作成する7つの異なる方法をカバーし、デフォルトスタイルをカスタマイズし、便利なプレースホルダーを作成し、画像に境界を追加しました。
私たちは、CSSを使用して選択できるこれらの他の要素を活用するときにロック解除できるすべての可能性を決してカバーしていません。しかし、リン・フィッシャーは趣味になり、単一の要素を使用して素晴らしいデザインを作成しました。そして、現実的な絵画効果のために複数の場所で擬似要素を使用するダイアナ・スミスのCSSアートを忘れないでください。
以上が::前の:: :: cssの擬似要素のための7つの実用的な用途の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
