CSS 伪 after/before 为 img 使用内容或背景？

CSS pseudo after/before using content or background for img?

至于伪元素:after/:before如果我想在那里显示图像显然有两种方法：

  1. 使用background-image:url(imgurl.png);
  2. 使用content:url(imgurl.png);

两种方式都正确有效吗？为什么我应该使用一种方式而不是另一种方式？

显然使用第二种方法不能设置图片属性，如大小。不过第一种方法一般网上讲得比较多

想法？

这取决于您的图像是什么，就像在 CSS.

中使用 <img> 标签与使用 background-image 之间的争论一样

如果您的图片是页面内容的一部分，请使用 content:url(imgurl.png);。当然，如果您希望图像具有交互性或告知用户在您页面上的体验，请使用 content。如果您的图片只是网站视觉设计的风格，请使用 background-image:url(imgurl.png);

此外，请注意您应该使用双冒号：::before 和 ::after。只有 IE8 需要单冒号版本。