伪元素之img标签

CSS伪元素:before :after等是用来添加一些选择器的特殊效果，在实际开发中我们会经常用到。顾名思义，“伪元素”就是伪装的元素，它不是真正的元素却通过样式就能有着和元素一样的表现，我们常见的块级、行块、行内元素大多都是可以设置伪元素的。
我们都知道img元素的外观和尺寸是由外部资源决定的，我们称 替换元素。
jǚ gè lì zi
举个栗子：

img{
        max-height: 200px;
        position: relative;
    }
img:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 200px;
        width: 300px;
        backgound: rgb(134, 76, 230);
        border: 2px dotted rgb(193, 26, 129);
        z-index: 333;
    }

我给图片添加了一个200*300带边框的伪元素。以下是效果：

并不能审查到:before，因为这里的img元素是一切正常的，只有当外部图片资源加载失败时会显示破裂图片和alt文字，同时img元素才会使用伪元素，利用attr()来获取图片alt属性值作为伪元素:after的content内容来替换img的内容。

这里我们使图片加载出错就看到添加的伪元素、破裂图片以及alt值了。

图片加载成功时显示正常的图片，加载失败时显示图片破裂效果以及伪元素。

总结一句话就是img的伪元素是在图片加载出错时的一个替补元素！