Last night I was recreating a project from a course when I came across a strange interaction. I was creating arrows using the border property that can by used for creating a timeline.
This pen shows the strange interaction. I created two sets of divs where the only difference in the css is that the first set has “position: absolute”. Note that I am not changing the X or Y position on either set of divs other to move the text to the right for accessibility.
For the div set that doesn’t have absolute positioning, the size of border is altered and the point of the arrow is hidden or removed. Why is this happening? If you have any other questions, please let me know. Thanks!
It’s not the div that has absolute positioning, but the pseudoelement created with :before which by default has display: inline.
So what you effectively have there is:
<div>
<pseudoelement></pseudoelement>
</div>
Pseudo element being inline will take some height (height of the font? ), but being empty won’t take any width.
Try adding font-size with different values to see how the height changes.
Thanks for taking the time to respond, I appreciate it.
It definitely has something to do with display: inline.
When I set the pseudoelements to flex, grid or block the border property acts as you would expect. So does absolute positioning default the display property block?
Edit: When defaulted back to display: static it still shows the inconsistency.
I appreciate your feedback but in this case I think that you are incorrect. Display: static does exist but we rarely have to assign it because it’s the default for all HTML elements as seen here. Based off your feedback that pseudoelements are display: inline by default, I wanted to try to set it as display: static to see if it would correct the issue.
Edit: If I misunderstood what you were saying, please elaborate if you could.
That is always a possibility but I don’t think that is the case here.
From my experience with this the issue happens when there is no position set and the display is set to inline (defaulted by pseudoelements per you).
The issue is resolved when I set the position to absolute OR I set the display to flex, grid or block.
In an attempt to determine if the issue was only caused by display inline, I set display static which did not resolve the issue. Does that make sense? I acknowledge that I’m still a beginner.
Edit:
Pseudo element being inline will take some height (height of the font? ), but being empty won’t take any width.
If psuedoelements are inline by default, would’t that mean that they wouldn’t be affected by height or width?
Thank you for being patient and helping me, I was being a bit thick. I was associating static as a display property and not a positional property. I had the same issue with assigning absolute to display before I realized my mistake. The good news is that as embarrassing as this is, it should keep me from making the mistake again.
), but being empty won’t take any width.