HTML and CSS Reference
In-Depth Information
Before you add the
:before
selector, set the thumbnail
paragraph to be relative positioned.
The
p.thumbnail
is set with a full height background
(gray) and a bottom padding property of 20 pixels
to pull that gray background more to the bottom, to
replicate it from
Monoplate
.
Using the
:before
selector you position a 24px tall of
white background on top of that background, but
because of the
:before
absolute position, the white
background gets priority and it would sit on top of
any content inside the
li
(e.g.
including the thumbnail
).
To disable that, position the thumbnail itself on
top of the white background which is easy with a
position:relative
and a
z-index
value of 1, as such:
#albums li p.thumbnail img {
position:relative;
z-index:1;
}