擬似要素

  • ::after
  • ::before

参考:

擬似要素 | MDN

使い方

参考:

CSS の疑似要素とは? before と after の使い方まとめ | サルワカ

擬似要素とは?便利な擬似要素を基礎から解説! | Webmedia

疑似要素・疑似クラスの種類と基本的な使い方 | 電脳情報局

CSS の擬似要素と擬似クラスを理解しよう! | アーティス

画像を表示する

参考:

疑似要素の画像サイズを変更する方法 | サルワカ

疑似要素で設定した画像のサイズを変更する方法を紹介! | Qumeru マガジン

疑似要素の content で画像を表示する方法!サイズを調整するには? | 向壁虚造

before / after

参考:

::before | MDN

::after | MDN

content

参考:

content | MDN

疑似要素が表示されない

置換要素には ::before 及び ::after による疑似要素は適用できない。

  • img
  • video
  • embed
  • iframe
  • br

参考:

擬似要素が付けれない!?html タグについて – Qiita

img タグに after 要素 (疑似要素) はつけれないだとーーー!! | Ich habe hunger

img タグには before 要素と after 要素 (疑似要素) が作れない | そんなに Geek じゃないエンジニアブログ

置換要素 | MDN

カード全体をクリック可能にする

参考:

クリック可能な範囲を広げるスタイルシートのテクニック、a 要素はボタンだけでもカード全体をクリック可能に | コリス

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です