<main>
<figure>
<img src="https://bittersmann.de/tmp/btra.jpg" alt="" aria-labelledby="caption"/>
<figcaption id="caption">Parody of Bruce Springsteen’s <i>Born to Run</i> album cover, drawing by Annette Prüfer</figcaption>
</figure>
<ol>
<li>Side A
<ol>
<li>Thunder Road</li>
<li>Tenth Avenue Freeze-Out</li>
<li>Night</li>
<li>Backstreets</li>
</ol>
</li>
<li>Side B
<ol>
<li>Born to Run</li>
<li>She’s the One</li>
<li>Meeting Across the River</li>
<li>Jungleland</li>
</ol>
</li>
</ol>
</main>
html
{
font: 3vh/1.3 Helvetica Neue, Helvetica, Arial, sans-serif;
}
figure
{
margin: 0;
}
figcaption
{
font-weight: 100;
max-width: 25em;
}
img
{
max-width: 100%;
max-height: 20rem;
clip(0, 0, 1000px, 20px);
overflow: hidden;
}
main > ol
{
list-style: none;
display: flex;
}
main > ol > li:not(:first-child)
{
margin-left: 3rem;
}
ol ol
{
font-weight: 100;
padding: 0;
}
:root
{
--error-color: red;
--error-outline: 0.25rem solid var(--error-color);
}
ol > *:not(li)
{
ERROR: ol must have only li children;
outline: 0.25rem solid red;
}
img:not([alt]),
img[alt=""]:not([role~="none"]):not([role~="presentation"]):not([aria-label]):not([aria-labelledby])
{
ERROR: image must have alternative text;
outline: var(--error-outline) !important;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.