How the ::before and ::after pseudo-element works
Hello guys, sorry to disturb you all; I'm trying to understand how the ::before and ::after pseudo-element work but I have a few question:
1. In the video I'm watching, from what is being told, we should always use the content property irrespective if we have any text content or not; even though the text content is null, we should use empty quotation. My question is why is it so please, why can't we just ignore the content property in this case?
2. If ever we use the content property with empty quotations (that is we will be using the pseudo-element mainly for styling), if we set a height, width and background color, we won't see any visual drawing until we set the position to absolute. My question is, why we should explicitly set the position to absolute? Even if the position is set to relative, it doesn't work, why position of absolute is important here please
Here is the codepen where I'm trying to experiment:
https://codepen.io/Fakeur/pen/PoMdKZV
Untitled
...
42 Replies
1: because that is how the spec works, it has to have content property to work.
2: you don't have to use position absolute. But by default I think its treated as a *inline element?
hope this helps
hmm when I remove the position absolute, the line is gone:
ah
Look at the code I showed
you set display block
yes
hmm how does display block makes the same effect
like it reproduces the same thing
because otherwise its inline and will not have a width
ahhh I see
So its putting it after the word element but without content is 0 width
make sense?
yep I see, thanks !!
for the content property thing, I just need to know that we need to use it everytime we use ::after or ::before pseudo-element ?
Yes
yep here it has a width
content="" is required period
without it it will not render
by the way the content property is only used for the before and after pseudo element ?
yes
Well š¤
Yea pretty sure it is xD
I was thinking counter used it but its not
Yep I see, I have a clearer idea now, thanks !!
np! glad I could help
last question; consider the 2 images; on the left, we use position absolute and on the right , we use display block; my question is why on the left, the space between the text and the line is smaller compared to that on the right please, for e.g, we can see in the left picture that the 'y' isn't well displayed compared to the right image
Because absolute removes it from the stack, where as display block has both in the same stack and are aware of each other.
So you basically are overlaying
vs adding
yep I see
ty !
a big difference with position absolute is that the element will be positioned within the first element without position static
yep, that's why I needed to set position relative to the h1 element
yup, or it will leech itself to <body> or <html>
body is the first relative yes?
š„²
i dont think so
i think it is static too
yea idk thats why I'm asking hah
yes, its static
and <html> too
by the way, when we say "removes it from the stack" , it's like saying "removes it from the normal flow" ? I often saw the wordings "stack context" but never try to figure out what it means exactly š
but there are no more parents, which is probably why it doesnt just poof out of existence
it seems to work off body š¤·āāļø
yes
You should learn what it means
Stacking context is one the most important things for you to learn in CSS
yep I will
he said it right too
okk, let me try to look for a nice video
the element is removed from the normal flow into a new stacking context