Learn Responsive Web Design by Building a Piano - Step 18

I have the same question this person had, I read the comments and I still don’t get it… can somebody explain, please!

:after selects the last child of an element

if you use Inspect page you can see the page structure with the ::after element included


the rest is CSS magic to position and color the ::after element

1 Like

This was very helpful, but my other question is why is it that when I take out the ::after pseudo element the rest of the keys disappear (the white ones)? I hope I made myself clear!

Hi there. When the ::after pseudo-element is removed from .key.black--key, the white keys disappear because the black keys are absolutely positioned and no longer properly contained within their parent .keys container. Since absolutely positioned elements are removed from the normal document flow, their absence might cause a layout shift, leading to misalignment or disappearance of other elements.

1 Like

Just ignore this… I forgot that the element has both the class=“key” and the class=“black––key”, so when those CSS properties were applied to the elements with the class=“key black––key” instead of the pseudo elements it overrode the previous CSS styling that was applied to the element with the class=“key”.
Thank you for your helpful answers!

1 Like