blog.xicolotic

:before、:after 擬似要素で生成した要素をスマートにクリアする。

以前、レスポンシブ案件で「そういやどうすんだ?」って調べたのでメモ。

例えばレスポンシブ案件で、PC版ではフキダシに口があるけど、スマホ版には無いよ、なんて場合。
PC版にはcontent: "";でフキダシ口を生成して表示、
スマホ版ではcontent:normal;を指定し初期化、要素(フキダシ口)の生成がされないようにする。

デモはこちら。
ウィンドウ幅を広げたり狭めたりしてご確認くださいませ。

【DEMO 1】生成した要素をスマートにクリアする。|:before、:after擬似要素の意外と知らない使いドコロ DEMO

カテゴリ:
CSS