Styling broken links


```html
<img src="http://bitsofco.de/broken.jpg" alt="Broken Image">
```
```css
img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "\f1c5" " " attr(alt);
  
  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);
  
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
```
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="300" data-theme-id="9561" data-default-tab="css,result" data-user="vicmaster" data-slug-hash="OJbWwRj" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Styling Broken Images">
  <span>See the Pen <a href="https://codepen.io/vicmaster/pen/OJbWwRj">
  Styling Broken Images</a> by Victor Velazquez (<a href="https://codepen.io/vicmaster">@vicmaster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

*Original source:* [bitsofco.de](https://bitsofco.de/styling-broken-images/)

Victor Velazquez
February 13, 2021