如果原本一个元素是替换元素(img,video),那么如果我们设置 content:'' 进行重置,则这个元素会被还原成非替换元素。

此时,我们就可以使用 ::before / ::after 伪元素实现一些功能。

例如,2020年最热门的“图片加载失败后CSS样式处理最佳实践”这篇文章提到的技术实现,就是利用这一特性,代码如下图所示。此时,出错的图片不仅显示了裂开的图像,同时还显示了 alt 信息,让用户知道这张图片所代表的含义是什么。

via: www.zhangxinxu.com
展开
Allan91于2022-01-05 04:08发布的图片
Allan91于2022-01-05 04:08发布的图片
评论