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的伪元素是在图片加载出错时的一个替补元素!