← #22 Use an underscore to name unused argument
#23

Style broken images

Topics: CSS

By default, the browser will display a placeholder for a broken image. This post introduces a simple tip to replace that placeholder with our stylable elements.

When the image is not found, the ::before and ::after pseudo-elements are displayed as long as they have content. We can take this advantage to make these elements visible to the user.

img {
position: relative;

/* The initial styles */
display: block;
height: auto;
min-height: 4rem;
width: 100%;
}

img::before,
img::after
{
/* Take full size of the image */
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

img::before {
/* Hide the default placeholder */
background: #fff;
content: '';
}

img::after {
/* Taken from the `alt` attribute of the element */
content: attr(alt) " image is broken";
border: 2px dotted #D1D5DB;

/* Center */
align-items: center;
display: flex;
justify-content: center;
}

Demo

The demo below shows extra elements for a broken image whose markup is

<img src="/img/not-found.png" alt="front-end tips" />
front-end tips
Fix a typo or suggest an improvement
#24 Add an icon to external links