疑似要素 before after
すみません、リフォーム番組ではありません・・・
最近コーディングはもっぱらテンプレートの改編のみで
一から書き起こすことが減ってしまって勉強を怠っている私です。
きちんとコーディングされたテンプレートのスタイルシートでは
きとんと設定されている beforeやらafterやらの疑似要素
わかった気になって全然わかってないままに
そこはあまり変更せずに通り過ぎてきたけれど
こういう場合に使えば便利な機能なのか・・・と ふと思いついて
自分で書き込んでみた
先生ページはこちら
さすがコリスさん わかりやすい説明です
やってみたかったのは
ロゴの横に小さく社名の読み方をつけること （読み方迷ってしまう社名なのでカタカナ表記もつけることにしました）
PCだと いい感じに1行に表示できるのですが
スマホにすると ロゴの右にテキストが収まりきらずに変に改行されてしまう
だからといってカタカナの前に改行コードを入れるとPCだと間延びしてしまう
なので、メディアクエリーつかって スマホのときだけ
カタカナのspan id=”kana” のbeforeに 改行を追加してみました。
いい感じに見えてます！
調子に乗って、 支店名の後ろで改行 電話アイコンの前でも改行 などと試してみました
実際にやってみないと わかったつもり じゃ身につかないってことですね
最近のコメント