こんにちは。久々の記事更新です。
擬似要素を愛しすぎて多用している今日この頃です。
今回は何かと便利な擬似要素について学んだ事を綴っていきます。
擬似要素とは
擬似要素とは、指定した要素の特定の部分にスタイルを付けられるものです。
CSSで作成するので、HTMLに色々書かずとも文章やボタンを装飾できます。
例えば、本館のトップページの新着記事の更新日にも擬似要素を使用しています。
こちらは「.deco-time-publish」というクラスを指定したtimeタグに「.deco-time-publish::before」という風に指定しています。
指定した要素にbeforeとafterの計２つが指定できます。「:before」のように１つのコロンでも動作する場合もありますが、基本的には「::after」のように２つのコロンでコーディングした方が間違いないです。
擬似要素を適用できないタグ
擬似要素は全てのHTMLタグに適用されるものではありません。
正しくコーディングしているのに表示されないときは、指定しているHTMLタグの種類を確認すると良いです。
私が知っている限りで擬似要素が適用されないHTMLタグを書いていきます。下記のもの以外にもあるかもしれません。
- br
- img
- input
そもそもこの記事は、キーワード検索のテキストボックスに虫メガネアイコンを付ける為に「input::before」で色々書いても何も表示されなかった事がきっかけで書き始めたので、他にも同じ経験をしている人がいるのではと思います。
解決策としては、inputタグやimgタグをspanタグやdivタグで囲い、囲ったタグに擬似要素を指定すれば疑似的に擬似要素を指定できます。
まとめ
今回は擬似要素について綴っていきました。
正しくコーディングしているのに正しく動作しない時って本当に悩みますよね。
擬似要素が適用されないタグがある、というのは一度経験しないと思いつかないトラブルの原因であると思うので、説明下手ですが少しでも多くの人の目に留まれば嬉しいです。
また、思い通りに装飾が表示されないときに、この記事を思い出してお役に立てると幸いです。
この記事を読んでいただきありがとうございました。
あなたのお役に立てれば幸いです。ではまた。