CSS 圖片失效提示

by on # css

利用before和after兩個偽元素,做圖片失效提示。
我們直接來看css

img:before {
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
  color: #f00;
}
img:after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
  color: #00f;
}

  

下面我在CodePen有做一個範例,可參考。

CodePen, css
comments powered by Disqus