记一个 CSS 伪类的 content 用法

content: url('...');

最近在群里看到一种写伪类 content 的用法,觉得很新奇,

群友一开始使用伪类来显示一个小图标,但是这个小图标比较大,
所以他就像设置宽高来显示这个伪类,但是他怎么都设置不了这个伪类的宽高,

我就和他说你设置伪类的宽高不就好了嘛?(我一直以来都是用伪类设置背景图片的形式来做 icon)
他说不行,我就看到了这个独特的写法…

他是直接在 content 里边写了图片的 url,然后神奇的是居然可以显示 content 里填写的图片!!!

我都没有用过,就查阅了一下 MDN 👉 [ content - CSS ]

URI 值会指定一个外部资源(比如图片)。如果该资源或图片不能显示,它就会被忽略或显示一些占位(比如无图片标志)。

先来看一下 DEMO

虽然这个方式存在很多问题,但是可以方便很多时候处理图片小图标。

就不需要先设置 content:'' 然后 display:inline-block 再设置宽高在设置背景图片,
直接把图片地址放在 content 里边就可以解决问题。很方便,但是这个方式显示的小图标并不能控制它的宽高。
不过把图片裁剪成合适大小就可以解决这个问题,而且兼容性还不错。 👉 Can I use

兼容性

你敢信 IE8 都兼容!