Hatena Blog Tags
はてなブログ トップ
擬似要素
このタグでブログを書く

擬似要素

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
itmaroon’s blog•2年前

文字はなくてもfont-sizeプロパティの設定が役立つことがありますよ

文字がない要素にfont-sizeプロパティを設定するって意味がわからん。 そう考えがちですが、そんなことはないのです。ふとした思い付きがあったのでご披露させていただきます。 課題は次のようなUIをGutenbergのブロックで制作するにあたってです。 フォームでユーザーに入力作業をしてもらっているとき、その進捗がどうなっているのかを表示するプログレスバーです。Bの数字とCのバーはAの文字要素に付加された擬似要素です。Bがbefore要素でCがafter要素です。B要素内には文字があるのでcssでfont-sizeを設定しました。コード全体としては次のようになります。 &::before { …

#CSS#font-size#擬似要素

ネットで話題

もっと見る
611ブックマーク擬似要素を使った見出しデザインweboook.blog22.fc2.com
554ブックマーク:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似ク...coliss.com
210ブックマーク[CSS]擬似要素の実用的な使用用途のまとめwebcre8.jp
208ブックマーク小粋空間: CSS の after 擬似要素で回り込みを解除するwww.koikikukan.com
116ブックマーク擬似要素とCSS3を使ってリストメニューを楽しくデザインweboook.blog22.fc2.com
86ブックマーク擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話weboook.blog22.fc2.com
73ブックマークアクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン / SQUEEZE - Web Design Studio -squeeze.jp
58ブックマーク[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)webcre8.jp
51ブックマークレビュー商品一覧ページのスマートフォン表示を改善！擬似要素の勉強にもなりました - 力こそパワーhrktksm.hatenablog.com

関連ブログ

web制作のしおり•3年前

53.疑似クラスとは違う？疑似要素。　～指定した要素の「内容」にスタイル適用したり、要素を生成して差し込んだり～

え、疑似クラスと疑似要素違うの？ 擬似クラスを調べた時に初めて知りました。 擬似クラスは、指定した要素の状態に対してスタイルを適用するもの。 それに対して、疑似要素はどんなものでしょうか。 では、早速やっていきましょう。 疑似要素とは 「指定した要素「内」の特定部分にスタイルを適用したり、指定した要素の前後に新たに要素を生成したりするものです。」 どんな種類があるのか。 ::after ::backdrop Experimental ::before ::cue ::cue-region ::file-selector-button ::grammar-error Experimental :…

#デイトラ#CSS#擬似要素