Retina Images on CSS3 pseudo elements

I have always successfully used the retina image technique described by Smashing Magazine using background-size and media queries.

However I just discovered a case where this technique doesn't seems to work : styling CSS3 pseudo elements.

<p>test</p>

p:before {
  content: url('http://file.rspreprod.fr/BNP/Maps/img/web/ic_pin_big@2x.png');
  background-size: 15px 25px;
  width:15px;
  height:25px;
}

Check this JS Fiddle : http://jsfiddle.net/t29xzxmw/2/

On iPhone and Android, the image is not crystal clear as it should be. Do you know a solution to apply retina images to CSS3 pseudo elements ?

---

使用background而不是content:""

p:before {
  content:"";
  background:url('http://file.rspreprod.fr/BNP/Maps/img/web/ic_pin_big@2x.png');
  background-size: 15px 25px;
  width:15px;
  height:25px;
}

链接地址: http://www.djcxy.com/p/41560.html

上一篇: 在IE9中隐藏默认选择下拉箭头

下一篇: 在CSS3伪元素上的Retina图像