::after selector in piano building using Css

[huzaifa3]

I was just attempting the step 20 of the module ‘build a piano using css’ of 'Responsive Web Design ’ certification. now see below:

here each white key is a div element , with class ‘key’ , while some of them include class = ‘black–key’ . Now the second key is a div element with both of these classes included . Now when we applied Css as follow:

.key.black–key::after {

content: “d”;

}
This happens:

Now according to me what should happen that ‘d’ letter should be written after second key as second key posses class with value ’ .key black–key’ , but why it is placing ‘d’ on the left side of second key(instead of placing it after second key like white space should not be covered with letter ‘d’ , letter ‘d’ should posses its own space) , please explain this whole thing !

[Notchoaveragejoe]

You should post the challenge link, not screenshots

[huzaifa3]

freeCodeCamp.org

This was the actual step where this selector was introduced , now same question (in context) as above , but now replace ‘d’ with content ‘’ .

[lasjorg]

I have a bit of a hard time understanding the question here.

The ::after pseudo-element created is by default inline and is a child element of the element it is used on.

[huzaifa3]

oh great , I just got that , but let I set content=‘b’ , why it is placing this content on. the left side of second key (on which this selector is applied) , ::after selector places the content after the present content of selected element , right ? so it should place d on the right of second key , isn’t it so ?

[lasjorg]

It is placed as the last child element inside the element it is created on. I.e. after everything else inside the element.