疑似要素の使い方 (before / after) [CSS]

擬似要素

  • ::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 要素はボタンだけでもカード全体をクリック可能に | コリス

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

コメントを残す

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

Protected by reCAPTCHA
Privacy - Terms