Style Broken Images

Make broken images more aesthetically-pleasing with a little bit of CSS:

  1. img {
  2.   display: block;
  3.   font-family: sans-serif;
  4.   font-weight: 300;
  5.   height: auto;
  6.   line-height: 2;
  7.   position: relative;
  8.   text-align: center;
  9.   width: 100%;
  10. }

Now add pseudo-elements rules to display a user message and URL reference of the broken image:

  1. img::before {
  2.   content: "We're sorry, the image below is broken :(";
  3.   display: block;
  4.   margin-bottom: 10px;
  5. }
  7. img::after {
  8.   content: "(url: " attr(src) ")";
  9.   display: block;
  10.   font-size: 12px;
  11. }

Learn more about styling for this pattern in Ire Aderinokun‘s original post.