itsxxtx
February 4, 2025, 10:03am
1
I have the same question this person had, I read the comments and I still don’t get it… can somebody explain, please!
Tell us what’s happening:
I’m having difficulty understanding exactly how the “::after” pseudo selector works in this case with the piano…I referenced step 18 because this is the step I’m asked to initially create this selector. I’m now at step 20, where I have to assign the width and height of the “black keys” using this pseudo selector. Once done, the piano, well, actually looks like a piano:
But by way of experimentation, when I remove the “::after” pseudo selector, the piano looks like this:
So I guess what I’m not understanding is how the “::after” pseudo selector actually causes this to look like a piano? But then removing it causes the whole thing to look like complete nonsense? I know the pseudo selector inserts content after the content of the selected element, but removing the pseudo selector causes a change so drastic that I can’t wrap my brain around how it works here… Hopefully I got my question across effectively…any help is appreciated and if you need me to elaborate further please let me know.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
/* file: styles.css */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0
Challenge: Learn Responsive Web Design by Building a Piano - Step 18
Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-responsive-web-design-by-building-a-piano/step-18
ILM
February 4, 2025, 12:46pm
2
: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