Before / After - a difficult concept for me

[ttibsen]

https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html

“. But first, you need to understand the ::before and ::after pseudo-elements. These pseudo-elements are used to add something before or after a selected element.”

This is a tough exercise! I would like to clarify the above quote before I get into the lesson.

So if I have 3 elements - A B C arranged this way from L to R

Then, if I have C::before (targeting A)

does that mean C is then placed to the Left of A ?

Similarly if I have A::after (targeting C)

does that mean that the A is then placed to the Right of C ?

I would just like a general feeling for what these functions do.

[YagneshP]

This is a good article to read

[ILM]

A::afteris a new element which appears after A - you are targeting that specific one

@ttibsen

Then, if I have C::before (targeting A)

this is not something possible, as with C::before you are targeting that specific element, you can’t also involve targeting A in it

[ttibsen]

Thanks for the link. I have just looked at a video on this topic and here is a screenshot of a part of the page -

Here, the lecturer uses the ::after PE to place a * after Name. If you can do the same thing by using Name* in your label tag then what is the point of adding the * via this seemingly more complicated method?