スマホの時だけ画像非表示にしてくださいってたまに言われます

本当はスマホ用の画像を用意した方がいいのですが時間や予算がまったくなかったりするときのための方法

元の状態

See the Pen wvaGyLX by sphenisc (@sphenisc) on CodePen.

完成版

See the Pen ZEGWrgd by sphenisc (@sphenisc) on CodePen.

imgタグには疑似要素を付けられないのでimgの上のh4にafterを付けてJSで imgのalt → afterのdata-label へと中身を移してからCSSのafterのcontentとして表示しています。 alt属性はそもそも画像が表示できない場合の代替テキストを書くための場所なのでSEO的にも問題なし

JSなしでやりたい場合

See the Pen jOPqzPd by sphenisc (@sphenisc) on CodePen.