HTMLやcssに詳しい方

質問

cssで、:afterや:beforeという擬似要素というものがありますが、いろいろな説明を見たのですが、いまいち使用の仕方が分かりません。

簡単に言えばどういうときに使用するのでしょうか？

回答No.1

hue2011

どういうときもなにも、ごく普通に設定するものです。

UMLをご存じではないですか。

ステートマシン図というのがあります。

ステートマシンというのは何か、というと、よく説明に出るのがCDプレイヤーです。
あれは、止まっている「停止状態」があります。回ってもいないし再生もしていない。
「＞」というボタンを押したらどうなりますか。
もしCD媒体が入っていたら、再生が始まり、「再生中」になります。
入っていなかったら、ちょとだけLEDがついてまた消灯し、「停止状態」になります。
間違ってBDを入れていたら、くわんくわん、と読もうとするけど読めず、「停止状態」になります。
再生中に「■」を押したら、「再生中断」という状態になって自動的に「停止状態」になります。
もし再生中に「>>」というのを押したら、仕様によりますが、次のトラックに飛んだり、早送りが始まったりします。
次のトラックに飛ぶ場合は、「次トラックに移動」という状態があり、その状態は終了時に自動的に「再生中」に移行します。
早送りの場合は「倍速再生中」の状態になっているでしょう。
あるトラックの再生中、が終わったら、「次トラックに移動」の状態になり、自動的に「再生中」になるでしょう。
「||」を押したら、「一時停止」という状態になります。
「一時停止」は、「■」で「停止状態」に、「＞」で「再生再開」の状態つまり一時停止時の場所から「再生中」になります。

なんらかのアクションで次にすることが決められています。
そのとき、いくつかのチェックポイントを確認することで、次にすることの前に確認すると言う行動になります。

HTMLでclassだとかidで設定されるブロックは基本的にステートマシンです。
何をされたときにどうする、ということをIDだったら直接書いてもいいですけど、一般的には仕様がわかるように、また、後日仕様変更が簡単になるように、CSSで設定します。

CDプレイヤーで、いま再生中の音楽があるかどうかを調べ、ある場合はこういう動き、ない場合はこういう動きとやりますね。
スイッチボタンを押されたとき、いきなり電源を落とさずに、再生中があればそれを停止しヘッドが戻って安定してから落ちますね。

同じようなことをしているのだと思ってCSSを見直してみてください。